I need to add responsive design features to my web application using Twitter Bootstrap. I just want the responsive behavior, I'm not interested in the typography, components or any other stuff included in Bootstrap.
I got a customized Bootstrap version just selecting the grid system. However, when I add the generated CSS to my application, all my styles are messed up (header, links and others). Why is that happening? How can I get a Bootstrap CSS with just the grid system? I would like to avoid a manual modification of the Bootstrap files.
Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Use the . col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns).
Go to http://getbootstrap.com/customize/ and toggle just what you want from the BS3 framework and then click "Compile and Download" and you'll get the CSS and JS that you chose.
Open up the CSS and remove all but the grid. They include some normalize stuff too. And you'll need to adjust all the styles on your site to box-sizing: border-box - http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With