In a project in VS2013 of a website I want to modify some attributes of the design. The changes made to bootstrap.css in the page inspector are displayed, but when they are published, the site does not appear. Scratching I discovered that bootstrap.min.css also maintains css data and those are the ones that send.
My doubts are: Should we modify the 2 css? Why is everything in one line? How should we act?
It is advisable that do not modify the file that you downloaded from the official page. There comes a time when you do not know what your styles are and what are the originals of Bootstrap and that creates maintenance problems (especially if another programmer tries to continue with the project and assumes that the styles are the originals).
What you must do is create your own CSS file in which the Bootstrap rules you want to change are "overwritten". This will keep the functionality of Bootstrap but with your modifications.
To have your styles take precedence over the default styles of Bootstrap, you have several options:
Write more specific selectors . Specificity is the method that browsers use to decide which styles will be applied when there is more than one selector defined for an element. They follow a formula that calculates the value of each rule giving more points (priority) in this order:
So if you want a <nav> to have your styles instead of those of Bootstrap, you can put an attribute id and (re) define the styles only for that id.
Use !important . When a style is defined and !important is added at the end, that tells the browser that that style takes precedence over any other (it's more important). For example, although the style for div is less specific than div#azul , the red color will be applied because that property comes with !important :
<style>
div {
color: red !important;
}
div#azul {
color: blue;
}
</style>
<div id="azul">Este texto es rojo</div>
But eye the use of !important should be avoided because it is considered bad practice as you can read in this MDN article . If you use !important everywhere, there comes a time when it loses its meaning and all it does is enlarge your CSS files and make them more difficult to read and maintain.
So personally, I would opt for the first method because it's cleaner .
In both cases, I would also recommend the CSS file where your styles are included in the project after where the Bootstrap styles are included (so, if two selectors have the same specificity value, your styles will prevail).
The bootstrap.min.css file is the "minimized" version of the bootstrap.css file and is automatically generated using a tool (most commonly from a Gulp or Grunt )
What is usually done is that while it is being developed the original version is used and in production the minimized version. For example, based on the property HttpContext.IsDebuggingEnabled
As soon as I customize the appearance of Bootstrap I would recommend that you use the Customize page. From this page you can configure many options and then you download a zip with these customizations.
You can also do what it says Alvaro Montoro , adding another file css with more specific rules that overwrite the default styles.
This is very powerful because you can decorate the main element with a class that would mark the "skin" and customize the bootstrap styles based on it
Html file:
<div class="skin-rob">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
</div>
</div>
...
</div>
CSS file:
.skin-rob .navbar-default .navbar-brand, .navbar-default {
background-color: blue;
}
.skin-rob .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
background-color: red;
}
This modification is causing the background of the "brand" of the menu to be blue normally and red when the mouse is on top (you can see it working in this JSFiddle)
A good practice would be not to modify the original styles of the provider (vendor) that this case is Twitter with its Bootstra v3.x library.
In the following link (Spanish) the CSS selectors are spoken and the hierarchy that exists between the rules to determine which to take:
If there are equal rules, take the last one read by the browser (in a top-down flow), as long as one of them does not have the ! important property. A rule with greater specificity has a higher priority than one that does not. Recommendation: Try to use ! important only as a last resort.
Note: Before running the examples, mentally create a solution (hypothesis) of what should result.
A <div> with several color labels applied (note the order of the classes and definition of the rules):
.rojo { color: red; }
.azul { color: blue; }
.verde { color: green; }<div class="azul verde rojo">Texto con color.</div> A <div> with several color labels applied (notice the order of the rules in CSS):
.verde { color: green; }
.color { color: blue; }
.color { color: orange; }<div class="color verde">Texto con color.</div> A <div> with several color labels applied (added specificity to a color):
div.rojo { color: red; }
.azul { color: blue; }
.verde { color: green; }<div class="azul verde rojo">Texto con color.</div>The same Bootstrap has an option to customize the styles of your bootstrap: link
In this utility you can change what you want from Bootstrap and in the end generate your files to use in your code. With this you will not have to manually modify the generated code.