All geek questions in one place

Enabling Twitter Bootstrap Custom CSS

When using custom css along with Twitter Bootstrap, which overwrites some styles, is it better to place a custom css link before or after the css boot buffer?

<link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <!-- Your custom css --> <link rel="stylesheet" href="css/style.css">

or

 <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- Your custom css --> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css">

and what are the pros and cons of each?

If I edit the body registration after loading bootstrap-responseive.css like this:

 <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> /* Add padding for navbar-top-fixed */ body { padding-top: 60px; padding-bottom: 40px; }

Then I also have to fix the response layout using a media query as I overwrite the global body style.

 /* Fix to remove top padding for narrow viewports */ @media (max-width: 979px) { body { padding-top: 0; } }
+1
source share
2 answers

It is usually best to place your own CSS after Bootstrap CSS. I would suggest that you want custom CSS to override Bootstrap CSS.

The advantages of posting your custom styles after Bootstraps is that you can change everything that is installed in CSS Bootstraps using the same selector as they are. Make it very easy to change minor things. If you use the same selector, the browser will use the latest rules that apply to the element.

I don’t see any benefits of posting Bootstrap CSS after your custom CSS, it really doesn't make sense to write your own styles and then override them with Bootstrap's ...

For example, this is not bootable CSS, but it will work the same if your section of the chapter has the following:

 <link href="framework.css" rel="stylesheet" type="text/css" /> <link href="custom-styles.css" rel="stylesheet" type="text/css" />

Then in framework.css you had the following:

 div.row { border: 1px solid #eee; border-radius: 3px; margin-bottom: 50px; padding: 15px; }

But then you realized that you want to add a red background (why and why ...) and change the radius of the border, you can have the following in custom-styles.css :

 div.row { background-color: red; border-radius: 10px; }

The resulting CSS applied to the element will be as follows:

 div.row { background-color: red; border: 1px solid #eee; border-radius: 10px; margin-bottom: 50px; padding: 15px; }

Since the styles from custom-styles.css override existing ones in framework.css and additional ones are added! :)

+7
source

I think if you put style.css on top, then bootstarp styles override it. If you put the .css style at the bottom, then bootstrap styles will be overridden by your custom styles

0
source

Source: https://habr.com/ru/post/959264/

More articles:


All Articles