Bootstrap Demos

This is a Bootstrap example.

You can add Bootstrap by linking to the cdn css files in the head of the document, and linking to the necessary Javascript files between script tags within the body tags. Once you've added these links you can use all of the Bootstrap classes, layout utilities, and components.

Basics

You add Bootstrap to your project by adding their custom class names to your elements or building from their Components. Bootstrap comes with its own grid system built on columns nested in rows. It has built in CSS breakpoints for resizing your design on different sized screens.

Primarily, when you're adding boostrap, you'll be adding classes to the html elements in your page to control colors, spacing, layout and display, and this will save you from writing a lot of css.

Rows and Columns

The main elements of the Bootstrap layout are rows and columns. You will need a div surrounding any grid elements with a "container" class. Rows wrap around columns in a 12-column grid.

The columns can also have preset responsive classes using col-xs-*, col-sm-*, col-md-*, col-lg-* and col-xl-*, with numbers from 1-12.

Icon Library

Bootstrap also has an open source icons library called Bootstrap Icons.

For example, here's a smiley Icon:

Or Here's another icon:

You can also add these by calling the stylesheet from the CDN link or downloading the .css and adding it to your files. Once you've added a link to the remote or local css files, you can insert icons from their library into your design as either svg or icon fonts.

Colors

Boostrap also has a set of pre-defined color classes that you can call on backgrounds, text, and links.

This is just to demonstrate another way to add color.

Display and Spacing Helper Classes

Bootstrap also has a number of display and spacing helper classes to control padding, margins, and display. Padding, for example, is added with the p- and a number from 0-5 signifying Bootstrap's internal units. these can be combined with direction, so "pt-" signifies padding-top and "px-" signifies horizontal padding on each side