A Guide to: Responsive Web Design with Bootstrap 3 and Sass

By . in Coding. Updated on .

Bootstrap offers a responsive grid system and a variety of web components that make it easy to create a responsive website swiftly. While Bootstrap traditionally uses LESS for styling, you can also use Sass if you prefer, thanks to Thomas McDonald.

How to Install Bootstrap with Sass

There are multiple methods to get started with Bootstrap and Sass. One way is to install it as a Ruby gem using the Terminal:

 gem install bootstrap-sass

Alternatively, you can integrate it with Compass using the following command. This method will only include essential Bootstrap variables and a file for your custom styles:

 compass create my-new-project -r bootstrap-sass --using bootstrap

You can also download the package directly from its Github repository.

What’s New in Bootstrap 3?

Bootstrap 3 introduces several new features:

Adoption of Flat Design

The most noticeable change in Bootstrap 3 is its shift towards flat design. Gone are the gradients and shadows from the previous version.

Flat Design in Bootstrap 3
Enhanced Grid System

Bootstrap 3 comes with a revamped grid system that includes Large, Medium, Small, and Extra Small Grids to accommodate various screen sizes. Here’s an HTML example to illustrate:

 <div class="container">
	 <div class="row">
		 <div class="column col-md-4 col-sm-6">
		 	<p>Left Column</p>
		 </div>
		 <div class="column col-md-4 col-sm-4">
		 	<p>Middle Column</p>
		 </div>
		 <div class="column col-md-4 col-sm-2">
		 	<p>Right Column</p>
		 </div>
	 </div>
 </div>

The grid system is more flexible and adjusts according to the screen size, thanks to the new class definitions.

New Grid System in Bootstrap 3
Additional Components

Bootstrap 3 also adds new components like Pager, List Group, Panels, and Page Header.

Leveraging Sass Functions

Using Sass functions like @extend and @include, you can achieve a cleaner and more semantic HTML structure. This makes your website layout more maintainable and programmable.

 .main-area {
 @extend .row;
 }
 .column {
 @extend .col-md-4;
 }
 .content {
 @extend .col-xs-6;
 @extend .col-sm-6;
 }
 .sidebar {
 @extend .col-xs-4;
 @extend .col-sm-4;
 }
 .side-nav {
 @extend .col-sm-2;
 @extend .col-sm-2;
 }

Final Thoughts

Combining Bootstrap and Sass can significantly speed up your web development process. Sass features like @extend and @include add an extra layer of flexibility, making your CSS more maintainable. For more information on Sass, check out this Getting Started With Sass: Installation And The Basics article.

So, are you ready to try out Bootstrap combined with Sass for your next web development project?

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail