How to use bootstrap-theme css with bootstrap 3

Question

After downloading a complete pack of bootstrap 3 from http   getbootstrap com  I noticed that there is a separate css file for theme  How to make use of it  Please explain   I included bootstrap-theme css in my existing bootstrap project  but there is no difference in output

User · Answer

Bootstrap-theme css is the additional CSS file  which is optional for you to use  It gives 3D effects on the buttons and some other elements

User · Answer

First  bootstrap-theme css is nothing else but equivalent of Bootstrap 2 x style in Bootstrap 3  If you really want to use it  just add it ALONG with bootstrap css  minified version will work too

User · Answer

As stated by others  the filename bootstrap-theme css is very confusing   I would have chosen something like bootstrap-3d css or bootstrap-fancy css which would be more descriptive of what it actually does   What the world sees as a  Bootstrap Theme  is a thing you can get from BootSwatch which is a totally different beast   With that said  the effects are quite nice - gradients and shadows and such   Unfortunately this file will wreak havoc on BootSwatch Themes  so I decided to dig into what it would take to make it play nice with them   LESS  Bootstrap-theme css is generated from the theme less file in the Bootstrap source   The affected elements are  as of Bootstrap v3 2 0     List items Buttons Images Dropdowns Navbars Alerts Progress bars List Groups Panels Wells   The theme less file depends on    import  variables less    import  mixins less     The code uses colors defined in variables less in several places  for example      Give the progress background some depth  progress        gradient  gt   vertical  start-color  darken  progress-bg  4     end-color   progress-bg      This why bootstrap-theme css totally messes up BootSwatch Themes   The good news is that BootSwatch Themes are also created from variables less files  so you can simply build a bootstrap-theme css for your BootSwatch Theme   Building bootstrap-theme css  The right way to do it is to update the Theme build process  but here here is the quick and dirty way   Replace the variables less file in the Bootstrap source with the one from your Bootswatch Theme and build it and voila you have a bootstrap-theme css file for your Bootswatch Theme   Building Bootstrap itself  Building Bootstrap may sound daunting  but it is actually very simple    Download the Bootstrap source code Download and install NodeJS Open a command prompt and navigate to the bootstrap source folder   Type  npm install    This will add the  node modules  folder to the project and download all the Node stuff you need  Install grunt globally  the -g option  by typing  npm install -g grunt-cli  Rename the  dist  folder to  dist-orig  then rebuild it by typing  grunt dist    Now check that there is a new  dist  folder which contains all you need to use your custom Bootstrap build    Done   See  that was easy  wasn t it

User · Answer

For an example of the css styles have a look at  http   getbootstrap com examples theme   If you want to see how the example looks without the bootstrap-theme css file open up your browser developer tools and delete the link from the  lt head gt  of the example and then you can compare it   I know this is an old question but posted it just in case anyone is looking for an example of  how it looks like I was   Update  bootstrap css   main css framework  grids  basic styles  etc   bootstrap-theme css   extended styling  3D buttons  gradients etc   This file is optional and does not effect the functionality of bootstrap at all  it only enhances the appearance   Update 2  With the release of v3 2 0 Bootstrap have added an option to view the theme css on the doc pages  If you go to one of the doc pages  css  components  javascript  you should see a  Preview theme  link at the bottom of the side nav which you can use to turn the theme css on and off

User · Answer

Upon downloading Bootstrap 3 x  you ll get bootstrap css and bootstrap-theme css  not to mention the minified versions of these files that are also present    bootstrap css  bootstrap css is completely styled and ready to use  if such is your desire  It is perhaps a bit plain but it is ready and it is there      You do not need to use bootstrap-theme css if you don t want to and things will be just fine    bootstrap-theme css  bootstrap-theme css is just what the name of the file is trying to suggest  it is a theme for bootstrap that is creatively considered  THE bootstrap theme   The name of the file confuses things just a bit since the base bootstrap css already has styling applied and I  for one  would consider those styles to be the default  But that conclusion is apparently incorrect in light of things said in the Bootstrap documentation s examples section in regard to this bootstrap-theme css file       Load the optional Bootstrap theme for a visually enhanced experience     The above quote is found here http   getbootstrap com getting-started  examples on a thumbnail that links to this example page http   getbootstrap com examples theme   The idea is that bootstrap-theme css is THE bootstrap theme AND it s optional   Themes at BootSwatch com  About the themes at BootSwatch com  These themes are not implemented like bootstrap-theme css  The BootSwatch themes are modified versions of the original bootstrap css  So  you should definitely NOT use a theme from BootSwatch AND the bootstrap-theme css file at the same time   Custom Theme  About Your Own Custom Theme  You might choose to modify bootstrap-theme css when creating your own theme  Doing so may make it easier to make styling changes without accidentally breaking any of that built-in Bootstrap goodness

User · Answer

I know this post is kinda old but      nbsp  As  witttness  pointed out      About Your Own Custom Theme You might choose to modify bootstrap-theme css when creating your own theme  Doing so may make it easier to make styling changes without accidentally breaking any of that built-in Bootstrap goodness     nbsp  I see it as Bootstrap has seen over the years that everyone wants something a bit different than the core styles   While you could modify bootstrap css it might break things and it could make updating to a newer version a real pain and time consuming   Downloading from a  theme  site means you have to wait on if that creator updates that theme  big if sometimes  right    nbsp  Some build their own  custom css  file and that s ok  but if you use  bootstrap-theme css  a lot of stuff is already built and this allows you to roll your own theme faster  without  disrupting the core of bootstrap css   I for one don t like the 3D buttons and gradients most of the time  so change them using bootstrap-theme css   Add margins or padding  change the radius to your buttons  and so on

[html] How to use bootstrap-theme.css with bootstrap 3?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap-3