Bootstrap is an HTML, CSS and JavaScript framework for developing responsive websites. It is easy to use, can be learned quickly and significantly improves productivity by saving many hours of development. In this tutorial, I will focus on the CSS part of the Bootstrap framework, the classes used when creating a responsive website.
Installation
Bootstrap files can be downloaded from their website and stored locally. Alternatively, you could use Boostrap CDN links. Add the following code to the
tag: There are a few things to note here. First, you would need to declare a HTML5 doctype. Since its core classes are mobile-friendly, you will also need to add a meta viewport tag:
There is no need to reset css styles for improved cross-browser rendering, as this feature is included in Boostrap by using Normalize.css.
Finally, if you use Bootstrap’s JavaScript features, jQuery needs to be included.
Breakpoints
By default, Bootstrap defines certain screen sizes at which the layout will change. The sizes are given in the following table:
For example, anything related to medium devices will be applied to the screen sizes between 992px and 1199px. Screens between 768px and 991px are classified as small devices, while the screen width less than 768px are extra small devices.
These breakpoints are just the default settings and can be customized on the compile and download page.
Containers
Containers are used to wrap all website content. There are two types of containers in Bootstrap:
- Fixed width container
- Full width container
Fixed width container has a different fixed size for each of the screen sizes mentioned above. It is used by adding the class .container to an element:
You can see the default container sizes in the following table:
Full width container always takes up 100% of the width, regardless of the screen size. At also applies left and right padding, so that the content does not touch the edge of the screen. Full width container is used by adding the class .container-fluid to an element:
Responsive Grid System
The responsive grid system is one of the most powerful Bootstrap features. It allows you to easily create grids that would look good on any device.
Like any grid, a Bootstrap grid has multiple columns, where each column must be a direct child of a row. Each row is a horizontal group of columns and must be located inside the container element, for proper alignment and padding. The maximum number of columns is 12. If more than 12 columns are placed within a single row, each group of extra columns will be shown in a new line.
Each column has its gutter (spacing between columns). It creates spacing between column content and aligns columns with other website content.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, if you want to create three equal columns, you would use .col-md-4 class for all three columns (4/12 = 1/3). Likewise, if you would like to create four equal columns, you would use .col-md-3 class (3/12 = 1/4). Columns don’t have to be equal, so you could have, for example, two columns where one column is .col-md-4 and the other is .col-md-8, which would mean that the second column would be two times larger than the first one.
Each screen size has its own column prefix (e.g. .col-md- is used for medium devices), which means that the columns will be horizontal above the breakpoint and stacked (one below each other) below it. For example, .col-md- columns will be stacked below 992px and horizontal above that screen size.
.col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-sm-8 .col-sm-4 In the example above, the first row of columns will be stacked when the screen width is less than 992px. The same columns will be horizontal when the screen is larger than 992px. The second row will be stacked for screens smaller than 768px and horizontal for larger screens.
Show and Hide Elements
Bootstrap comes with a set of classes which allow us to easily show or hide certain elements, depending on the screen width. These classes are shown in a table for easy understanding:
For example, an element with the class .visible-md would be visible on screen widths between 992px and 1199px, a hidden in all others, while the class .visible-lg would make an element visible only on screens larger than 1200px. Of course, these classes can be combined to achieve the wanted layout.
Scale Images
Images can fit the layout by using .img-responsive class. This class makes the image 100% wide, while the height is set to automatic, resizing the image depending on screen width and keeping the aspect ratio. Also, the image becomes a block element.
To center responsive images, use .center-block class.
Other Features
In addition to responsive utilities, Bootstrap has many other features such as styling form elements, buttons, tables and more. Learn more about these features on their website.
