How to style elements that already contain bootstrap class preset style?

Asked

Viewed 1,175 times

1

Hello folks from Stackoverflow,

I’m using bootstrap, but there are some bootstrap styles that I don’t think are cool.

I am putting my custom style in a css file, however the bootstrap style prevails even linking my css style file after bootstrap css style file.

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

Have some other way to organize the styles without conflicting with the bootstrap?

This would be a sample of the 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>

<!-- Este código faz parte de um outro arquivo que faz uso do layout principal por meio do framework Laravel -->

@push('linkLayout1')
    <link rel="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

  • You must have made some confusion or some extra theme that you are using, this responds to everything from CSS (same bootstrap): https://answall.com/a/143893/3635

  • It would be good if you put an excerpt of code with the problem.

  • Thanks for the help.

  • 1

    By the way, there’s one : left in your code. It would be .panel-title-azul { without the : between the blue and the { ... tried to remove it already?

  • Considering the foreseen rules on specificity and considering that the sent example has supposedly the same specificity and is as last in the cascade, should prevail the blue color of the title, or else the bootstrap style is more important?

  • Hello Bacco, the intention is to keep this style in the title instead of the already foreseen in bootstrap.

  • I changed the code, I had put the class in the wrong place. However, that’s not the problem.

  • His code is functional. He applied the blue color on the text as reported.

Show 3 more comments

1 answer

3


Hello. You have assigned the panel-title-blue class to a div, and within that div you have an H3 with another class. Soon, that H3 will respect his class first, and then his father’s class. Then the right thing 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: https://jsfiddle.net/9fagq0eb/2/ Moreover, that ":" (two points) after the . panel-title-blue generated a conflict.

  • Actually, I had put ":" too much. However, in my original code I already made all the corrections and I’m still facing this error. Some classes I’ve customized are working and the one specifically that changes the panel-title is not.

  • But thanks for your help, you’ve given a tremendous amount of strength. I’ll break my head a little bit more until I find where the fault is.

  • Show your original code then. Because in my example using your available code, the color is being applied to the title.

  • Hi VME, put part of the code I’m using, however it doesn’t work right because you have to inject the template and css file, due to being using the Laravel framework.

  • I was able to solve the problem. I think it was the browser cache that was keeping the failed css. I had tried to do this other times and had not noticed this drawback. Thank you VME.

  • 1

    @Jansenmages if the answer from fellow VME solves your problem, you can click on ✅ next to it to mark as accepted, so on the main page also appears that the problem had a solution. And as soon as you have a few points of reputation on the site, in addition to being able to accept answers, you will be able to vote in all the publications you like.

Show 1 more comment

Browser other questions tagged css bootstrap

You are not signed in. Login or sign up in order to post.