How to get just the responsive grid from Bootstrap 3?

HtmlCssTwitter BootstrapResponsive Design

Html Problem Overview

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.

Html Solutions

Solution 1 - Html

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.

Bootstrap Customizer

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

Solution 2 - Html

Checkout zirafa/bootstrap-grid-only. It contains only the bootstrap grid and responsive utilities that you need (no reset or anything), and simplifies the complexity of working directly with the LESS files.

Solution 3 - Html

Just choose Grid system and "responsive utilities" it gives you this: http://jsfiddle.net/7LVzs/

Solution 4 - Html

Made a Grunt build with the Bootstrap 3.3.5 grid only:

https://github.com/horgen/grunt-builds/tree/master/bootstrap-grid

~10KB minimized.

If you need some other parts from Bootstrap just include them in /src/less/bootstrap.less.

Solution 5 - Html

I would suggest using MDO's http://getpreboot.com/ instead. As of v2, preboot back ports the LESS mixins/variables used to create the Bootstrap 3.0 Grid System and is much more light weight than using the CSS generator. In fact, if you only include preboot.less there is NO overhead because the entire file is made up of mixins/variables and therefore are only used in pre-compilation and not the final output.

Solution 6 - Html

It looks like you can download just the grid now on Bootstrap 4s new download features.

Solution 7 - Html

It's been a while since this question was asked, but maybe now you can forego Bootstrap altogether and use CSS Grid! (it's simpler, neater, more flexible and faster). See this cool article: Stop using Bootstrap — create a practical CSS Grid template for your component based UI

Solution 8 - Html

In Bootstrap 4, there are already separated files in their GitHub. You can find them here

https://github.com/twbs/bootstrap/tree/main/dist/css
Categories
Recommended Html Solutions
Recommended Css Solutions
Recommended Twitter Bootstrap Solutions
Recommended Responsive Design Solutions

Previous Solution:

Timertask or Handler

AndroidPerformanceTimerHandlerTimertask

Next Solution:

Auto start node.js server on boot

node.js

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionManuel ZapataView Question on Stackoverflow
Solution 1 - HtmlChristinaView Answer on Stackoverflow
Solution 2 - HtmlburrbrownView Answer on Stackoverflow
Solution 3 - HtmlJmorvanView Answer on Stackoverflow
Solution 4 - HtmlhorgenView Answer on Stackoverflow
Solution 5 - HtmlsrquinnView Answer on Stackoverflow
Solution 6 - HtmlRichard CliffordView Answer on Stackoverflow
Solution 7 - HtmlAlex FirebrandView Answer on Stackoverflow
Solution 8 - HtmlHari DasView Answer on Stackoverflow