This situation happens to me all the time. I’m working on a client web site, making updates or content changes, but the site is not responsive and/or wasn’t built with any sort of CSS framework. I also encounter this problem when trying to throw together pages for the WordPress admin. I could do the work manually, but I’ve become spoiled by grids. Bootstrap happens to be my favorite.
If I include the regular Bootstrap distribution, I have the problem of it changing style and typography. That won’t work. I could use a different, grid-only framework, but I have become used to Bootstrap conventions.
To solve this problem, I simply compile the Bootstrap SASS files, including only the grid and responsive utilities modules. To avoid potential conflicts with other CSS, I use a wrapper (in this case, .bootstrap-wrapper). Now, I can simply include the CSS file in the project and use the syntax that I am so accustomed to.
You can download the Bootstrap grid-only CSS file on GitHub: bootstrap-grid.css
<div class="bootstrap-wrapper"> <div class="container"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row hidden-sm-down"> <!-- Hidden on small screens --> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> </div>