Bootstrap Notes

There are my notes about Bootstrap, to act as a reference and memory aide when I build Bootstrap sites. They are written primarily for personal use but may be of assistance to others. They may not be that intelligible to others, in which case try my Bootstrap Resources page.

Essentially Bootstrap is a solution for making a website that displays nicely on multiple screen sizes, with the minimum of fuss. It allows you to build the website layout quickly without having to do all the fundamental CSS coding yourself, which can be a major technical headache.

Bootstrap Responsive Functionality - Bootstrap Breakpoints and the Bootstrap Column System

Bootstrap uses a grid system made up of 12 columns. I will give an overview here, but for the full official guide, see the CSS page at the Bootstrap site and go to the Grid system section.

The columns start off stacked on a small screen, and can then move to horizontal at a given breakpoint.

The screensize point at which the columns break from stacked to horizontal depends on the class you apply to your columns.

You need to decide how many columns you want your web layout to have, and at what screensize point it will break into this layout (as everything is always stacked when on mobile).

Once you have decided this, you then create the relevant number of divs, e.g. for a two column page layout, then two divs in the row:

<div class="row">
<div>Your first page column.</div>
<div>Your second page column.</div>
</div>

You then need to apply your Bootstrap column classes. Choose the class according to the screensize you want the columns to unstack at. The numbers involved with the Bootstrap classes have to add up to 12, and determine the number of underlying Bootstrap columns that are being spanned by your page layout column. So, for a two page column layout, with a column width ratio of 2 to 1, that unstacks for desktops of 992px and above (or medium devices), you would use:

<div class="row">
<div class="col-md-8">Your first page column.</div>
<div class="col-md-4">Your second page column.</div>
</div>

The way you make a Bootstrap page responsive is by applying a particular type of Bootstrap class to your columns.

There are column classes for four different sizes of device:

- Extra small devices, for phones, <768px, .col-xs-

- Small devices, for tablets, less than or equal to 768px, .col-sm-

- Medium devices, for desktops, greater than or equal to 992px, .col-md-

- Large devices, for large desktops, greater than or equal to 1,200px, .col-lg-

Responsive Images in Bootstrap

Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.

The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image.

Example:

Bootstrap Default Text Size

Per http://getbootstrap.com/css/ then:

"Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default)."

The default text size in Bootstrap is actually a variable called $font-size-base, which in turn is used to calculate all sorts of other sizes, e.g. H1 etc etc. Thus, if you want to change the default text size, you should use Bootstrap's Customize feature and change it there. Changing font size through custom CSS is not recommended because it can throw out all the relative proportions, e.g. of headings. See also:

Stackoverflow Question on How to Change Bootstrap's Global Default Font Size

What you need to do is go to the Customize page, and amend the @font-size-base field value. I changed it from 14px to 18px.

Then click the compile and download button and you get your own version of Bootstrap.

You then need to put your custom bootstrap.min.css file on your server, and reference it locally as follows:

Bootstrap Navbar

For help with the navbar, go to Bootstrap site, click on Components and Choose Navbar from the side menu

Visit LowPrices.co.uk for Your UK Shopping

Compare Prices
at LowPrices.co.uk

Home / Site Map | Contact