CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
copser
copser

Reputation: 2641

Overwriting Bootstrap css?

I have a question regarding overwriting bootstrap css. I want to use mine all style, background, media, etc. I have reviewed for related question and answers, everybody is saying that I load mine css after bootstrap core css like this.

 <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/mystyle.css" rel="stylesheet">

Then for example I want to put a background in mine wrap-pad section.

.service .wrap-pad {
    background-image: url(../background/booksground.png);
    background-repeat: no-repeat;
    -webkit-filter: none;
    -o-filter: none;
    filter: none;
}

After I do this nothing happens, further more I can not overwrite any of the styles or put mine media in it, I have tried to do this with navbar, footer etc. Everything looks plain whit standard bootstrap styles in it. I am using small-business theme, from startbootstrap.com, bootstrap 3.2.2, then I modified it with some wrap pad animations and carousel to fit mine needs. How can I overcome this and start using mine styles. Tank you.

Upvotes: 2

Views: 1227

Answers (3)

Itachi Sama
Itachi Sama

Reputation: 926

CSS works as the following..

1 Linked File

2 Internal code

3 inline inside a tag

This being said.. Inline always overwrites Internal and Linked, And Internal (same page) always overrides css from outside.. So since bootstrap has the css imported externally, the other two options should overwrite it.

Hope This Helps.

Upvotes: 1

Hellon Canella Machado
Hellon Canella Machado

Reputation: 456

Just write a style, a class for example

.any{
   background: any-color
}

and in your tag add the the any class

<div class='class-1 class-2 class-3 any'>

As all the classes are applied in cascade (think about the stand 'css') the last tends to overwrite the other styles.

Upvotes: 0

Benjamin Ray
Benjamin Ray

Reputation: 1870

Your overriding style selectors have to be as specific as, or more specific than, the Bootstrap selectors. Also, as you stated, your custom styles need to appear after the ones you are overriding.

For example, this is some CSS from the default bootstrap.css:

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #e8e8e8;
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
  background-repeat: repeat-x;
}

And I used this CSS to override it in custom.css:

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: inherit;
    text-decoration: none;
    background-color: #eeeeee;
    border-left: 2px solid #4285f4;
    padding-left: 18px; 
}

Upvotes: 2

Related Questions