Bootstrap at a glance
July 28, 2023 - Reading time: 10 minutes

What

A free CSS framework to work with when time supply is running low.

Version 3 is the most stable version, supported by all modern browsers.

How

Bootstrap is a combination of pre-written CSS and JavaScript (jQuery) files, both available from a CDN. To access it, add reference to head element:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Where

Some code snippets are available on my dedicated CodePen

Basic structure

A section needs a container class

Encapsulate your section into a container class which can be either:

  • container (fixed width container) OR
  • container-fluid (full width container)

A section is 12 columns-wide

Group elements in a row with row class then distribute included elements into columns per screen size with col-screenSize-numberOfColumns class. An additionnal well class would add grey background color and rounded border to the zone.

size would be:

  • xs for phones - screens less than 768px wide / extra-small
  • sm for tablets - screens equal to or greater than 768px wide / small
  • md for small laptops - screens equal to or greater than 992px wide / medium
  • lg for laptops and desktops - screens equal to or greater than 1200px wide / large

numberOfColumns is a number between 1 and 12. A row should have a total of 12 colums for each screenSize.

For instance, if we want to align 3 buttons in a row, it means 1 button should be 4 colums wide (3 * 4 = 12).

<div class="row">
 <div class="col-xs-4 col-md-4 col-lg-4 well">
  <button>1</button>
 </div>
 <div class="col-xs-4 col-md-4 col-lg-4 well">
  <button>2</button>
 </div>
 <div class="col-xs-4 col-md-4 col-lg-4 well">
  <button>3</button>
 </div>
</div>

Navbar

Add a static navbar to the top of the page with your website's name, dropdowns, collapsable for small screens, align sign in button to the right and so on. Have a look on CodePen.

Basic classes

Contextual Colors and Backgrounds

Classes for colors are:

  • element-muted
  • element-primary
  • element-success
  • element-info
  • element-warning
  • element-danger

element could be text, bg, alert, btn

Image and image gallery

Some useful class for img element:

  • img-thumbnail: adds some rounded borders and padding
  • img-responsive: applies display: block, max-width: 100% and height: auto.

To create a gallery, combine thumbnail class with Bootstrap grid system:

  • create an element with container class
  • within the container, create as many elements with row class as you need
  • within each row, divide the space into as many colums as you need (col-screenSize-numberOfColumns)
  • within each colum, apply thumbnail class to a wrapper element such as figure that will contain a link to the image source full size that will itself contain
    • the image element
    • a figcaption element

Create an 'alert' element

Show the user some confirmation or alert message within an element, such as a div. Apply alert class to an element in addition with a alert-contextualColor class (see above) and alert-dismissible class to allow user to remove the element. Removal can be smoothened with fade and in classes. For instance:

<div class="alert alert-success alert-dismissible fade in">
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

Customize button, a, input

Basic classes to apply on a button, a or input elements are:

  • btn and
  • btn-default (display as wide as the text it contains) OR
  • btn-block (as wide as 100% of the available width (breaks on a new line))

Then add if needed:

  • color: btn-contextualColor
  • size: btn-size

a & button groups

A collection of share links can typically be grouped on a single line with btn-group or btn-group-vertical (+ -size if needed) applied on wrapper element.

Search

Categories