How to stylize elements that already contain predefined bootstrap class styles? [duplicate]

Question

How to stylize elements that already contain predefined bootstrap class styles? [duplicate]

Navigation

#1 by (3 votes)

1

Hello, everyone at Stackoverflow,

I'm using the bootstrap, however there are some bootstrap styles I do not think are cool.

I'm putting my custom style into a css file, however the bootstrap style even prevails by linking my css styles file after the bootstrap css style file.

I can only change when I put the style definition inline in the element.

Is there any other way to organize styles without conflicting with the bootstrap?

This would be a sample code.

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
        .panel-title-azul { color: blue; font-size: 24px; }
    </style>

</head>

<body>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title panel-title-azul">Cadastro</h3>
        </div>
    </div>

</body>

</html>

CSS:

.panel-title-azul { 
    color: blue; 
    font-size: 24px; 
}

HTML:

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">

<head>
    <meta charset="utf=8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="icon" href="{{ asset('images/icones/icone-logo.png') }}">

    <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    @stack('linkLayout1')
    @stack('linkLayout2')
    @stack('linkLayout3')

    <script src="js/jquery-3.2.0.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--Scripts--><script>window.Laravel={!!json_encode(['csrfToken'=>csrf_token(),])!!};</script></head><body></body></html><!--EstecódigofazpartedeumoutroarquivoquefazusodolayoutprincipalpormeiodoframeworkLaravel-->@push('linkLayout1')<linkrel="stylesheet" href="{{ asset('css/auth/register.css') }}">
@endpush

@extends('layout')

@section('content')

<section class="blocoPrincipal">
    <div class="divisaoPrincipal">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title panel-title-azul">Faça seu cadastro no site</h3>
            </div>
        </div>
    </div>
</section>

css bootstrap

asked by anonymous 23.04.2017 / 02:55

1 answer

Using variables How to remove undue commits from a remote branch?

score 3 · Accepted Answer

Hello. You assigned the panel-title-blue class to a div, and within that div you have an h3 with another class. Soon, this h3 will first respect his class, and then the parent div class. So the correct one would be:

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
        .panel-title-azul { color: blue; font-size: 24px; }
    </style>

</head>

<body>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title-azul">Cadastro</h3>
        </div>
    </div>

</body>

</html>

Demo: link In addition, that ":" (colon) after .panel-title-blue generated a conflict.