Difference Between Bootstrap.CSS and Bootstrap-Combined.Min.CSS

What is the difference between bootstrap.css and bootstrap-combined.min.css?

The file bootstrap-combined.min.css is for Bootstrap v2, it is the combined css file of bootstrap.css (the main css file) and bootstrap-responsive.css (the responsive Bootstrap styles). It's exactly the same as using those two files separately but it just saves you an extra request.

The "min" part of the filename just means that it has been minified, which is to say that it has had all the unnecessary white-space/comments/etc removed.

Conclusion

bootstrap.min.css = compressed version of bootstrap.css

bootstrap-combined.min.css = bootstrap.min.css + bootstrap-responsive.min.css

Using bootstrap.min.css and bootstrap-combined.min.css causes UI issues

You are using different versions of bootstrap (v2 and v3). They probably override or interfere with each other. You should use only the latest version (not the combined one). From what I know, bootstrap v3 has responsive design included.

From bootstrap:

Bootstrap 3 is not backwards compatible with v2.x.

Taken from joshunts answer:

The file bootstrap-combined.min.css is for Bootstrap v2, it is the
combined css file of bootstrap.css (the main css file) and
bootstrap-responsive.css (the responsive Bootstrap styles). It's
exactly the same as using those two files separately but it just saves
you an extra request.

Conclusion

bootstrap.min.css = compressed version of bootstrap.css
bootstrap-combined.min.css = bootstrap.min.css +
bootstrap-responsive.min.css

Using Bootstrap CSS combined with Custom CSS - is this practice bad?

There is no problem with that , first you need to look at this linik

https://stackoverflow.com/a/26640525/6572922

then you need to reffer How to Easily Add Custom CSS to Bootstrap with Examples

http://www.kodingmadesimple.com/2015/01/add-custom-css-to-bootstrap-examples.html

This link can clear your doubts

Using Bootstrap and my own CSS together

You will have the stylesheets order like this, first you will include bootstrap css, then your stylesheet file. Why is that? Because that way you can overwrite the classes from the framework without using !important. You can write your own classes and include them in your layout, you can use bootstrap classes and make adjustments to them as you need. When you mix your classes and bootstrap classes check what attributes are added from their classes, do you need them or not etc...

Example

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/><style>  /* Your external css file will go here. This is just for testing :) */  .mycustombtn{  background: #000;}
</style>

<button type="button" class="btn btn-danger mycustombtn">Danger</button>

what are the .map files used for in Bootstrap 3.x?

From Working with CSS preprocessors in Chrome DevTools:

Many developers generate CSS style sheets using a CSS preprocessor, such as Sass, Less, or Stylus. Because the CSS files are generated, editing the CSS files directly is not as helpful.

For preprocessors that support CSS source maps, DevTools lets you live-edit your preprocessor source files in the Sources panel, and view the results without having to leave DevTools or refresh the page. When you inspect an element whose styles are provided by a generated CSS file, the Elements panel displays a link to the original source file, not the generated .css file.

Using a bootstrap.css style for new account creation

You are missing the // as part of your stylesheet link.

Change it to

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

Same applies to the script tags at the bottom.

Also, note that you need to include the jQuery file before the bootstrap file as bootstrap depends on several jQuery features.

Twitter bootstrap on Node.js and Express

Create one sub folder in public folder and name it as stylesheets.Then put all your twiter bootstraper css files in that stylesheets folder.Then you can link the file like below.Follow the same for js files also.

 <link rel='stylesheet' href='stylesheets/bootstrap.min.css'>
<link rel='stylesheet' href='stylesheets/bootstrap-responsive.css'>
<script src='javascripts/jquery-2.0.2.min.js'></script>


Related Topics



Leave a reply



Submit