Lesson 2 - Bootstrap - Reboot
In the previous lesson, Introduction to the Bootstrap CSS framework, we clarified why it's a good idea to use a CSS framework and we tried to edit one of many Bootstrap templates. During this online course, we'll describe individual parts of the Bootstrap framework. In the end, we'll achieve an overview of what it can help us with and what styles we can use. You'll find that it truly offers a lot.
First things first. In the beginning, we've already mentioned that HTML have some default styles. For historic reasons, these styles are not always very smart. There's also a possibility that they'll look different in different browsers or be ineffective to use. Bootstrap contains Reboot, which is a code declaring default styles. It's build upon the Normalize project which goal is to declare optimal default styles to make webdesign as simple as possible. Sometimes, these settings are called a CSS reset. Reboot modifies the default style of elements without a necessity to add any classes. It does it in the following way:
box-sizing property is globally set to the
border-box value. Thanks to that, the size of elements is always
calculated as the total size including the border and padding. You probably know
that from the boxmodel. Specifying sizes like this is way more intuitive and it
allows us to use percents, since e.g.
width: 50% now really
occupies half of the webpage even if the element has a border or padding. If you
weren't aware of this, working with Bootstrap could surprise you a lot.
<body> font is set to
rem units are preferred as they specify the relative size against
the size of the letter
M in the
element. Bootstrap doesn't modify this size, but it sets all other dimensions
according to it. When the user sets a bigger font due to using a mobile device
or simply because he can't see well, every font using the
will be rescaled too. Margins and other components using the
units will be rescaled as well. You can try to set a different font size to the
<html> element and watch how the grid and other Bootstrap
parts rescale. It's a good idea to follow these conventions in your own styles
The default values for
, and `background-color. are set for the
In the last years, Apple, Microsoft, and Google created nice fonts and they're using them as default on their devices. Why not to use them on web, when they're available? Bootstrap declares the "Native font stack", where these fonts are listed and one of them is always found on any system. The fonts are San Francisco (Apple), Segoe UI (Windows), and Roboto (Google Android). Other systems will use the fallback fonts which are "Helverica Neue", Arial and sans-serif. Emoji fonts like "Apple Color Emoji", "Segoe UI Emoji", and "Segoe UI Symbol" are also supported. This means you can insert color emoji into your texts without linking any special fonts.
Bootstrap encourages to not set both vertical margins of elements
margin-bottom), since margins are
merged and you never know how big the actual gap between the elements will be.
That's another convention you should maintain, use
only. Bootstrap sets this, for example, for all the heading from
<h6> and removes their
The same goes for
<p> paragraphs, and
lists as well. Nested lists don't have any
margin at all. Items of
<dd> definition lists have the left margin
the bottom margin
border-style set to
<caption> rendering and unified
<fieldset> elements have no borders nor edges to make them
work just as wrappers,
<legend> is styled as a heading,
<labels> are inline blocks so they could have margins. Other
elements have been normalized as well such as
<button>. If you've ever been fighting to make the size of
<select> element same in different browsers or on
different operating systems, you'll appreciate Reboot All
elements are resizable only vertically since resizing them horizontally would
result in leaking from the page layout.
Very similar changes have been also made in
elements (the font isn't italic and
margin-bottom has been added).
We should separate individual address rows with
<blockquote> has gained the bottom margin and
<abbr> got underlined and dotted. Maybe you know the HTML5
hidden attribute, which is used to hide elements. Bootstrap adds
!important to its style so it can't be re-written. However, be
aware that this technique is not compatible with hiding and showing elements
using jQuery. We'll be discussing
visibility later in this course. For all mobile control elements,
touch-action: manipulation is set to catch unwanted doubleclicks in
Internet Explorer and Edge.
In the next lesson, Bootstrap - Typography, we'll focus on typography.