s

Bootstrap framework for creating responsive sites.

By Angela C

October 3, 2021 in css html

Reading time: 3 minutes.

Just some reference notes on using Bootstrap based on official documentation1 and other resources including https://www.w3schools.com2.

Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites.3 The main differences between Bootstrap 5 and previous versions is that it has switched to JavaScript instead of jQuery.

There are various ways to use Bootstrap in your project:

  • using a CDN such as jsDelivr which is a free open-source CDN.
  • using a package manager
  • download the source files from https://getbootstrap.com

Bootstrap 5 Utilities

margin and padding spacing utilities to control how elements and components are spaced and sized.

Other utility classes:

  • border classes for adding or removing borders from an element

  • border-1 to border-5 to change the width of the border

  • contextual border colour classes "border-primary", "border-secondary" etc.

  • rounded to add rounded corners (border radius) to an element

  • float-start, float-end and clearfix

  • Responsive floats

  • mx-auto to centre-align Bootstrap includes an .mx-auto class for horizontally centering fixed-width block level content. Use mx-auto to center an element. It adds margin-left and margin-right: auto:
    For example:

    <div class="mx-auto" style="width: 200px;">
  Centered element
</div>

  • w-* classes to set the width of an element

  • h-* classes to set the height of an element

  • Spacing

By default containers have left and right padding, with no top or bottom padding. Spacing utlities such as extra padding and margins can be used to make them look better.

Bootstrap 5 has a wide range of responsive margin and padding utility classes that work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):
The classes are used in the format: {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl and xxl. 4

  • property: m margin; p padding;
  • sides: t for top; b bottom; s left; e right; x left and right; y top and bottom.
  • size: 0 to 5 to set margin or padding from 0 to 3 rem. (0: 0, 1: 0.25rem, 2: 0.5rem, 3: 1rem, 4: 1.5rem, 5: 3rem) auto to set margins to auto.

For example pb-3 set to padding top to size 3 (which is 1 rem). pt-4 sets top padding to 1.5rem, p-5 sets padding on all sides to 3 rem. m-5 pb-5 sets margin on all sides to 3.5 rem and bottom padding to 3 rem. ms-3 to set margin left to size 3. mx-3 to set left and right margin to size 3

Responsive padding or margin examples:

pb-sm-5 to set padding bottom size 5 on small screens; ms-md-5 margin left to size 5 on medium screens; mx-lg-5 to set left and right margin to size 5 on large screens.

Other Utility classes

  • shadow_ classes to add shadows to an element

  • align_ classes to change the alignment of elements (baseline, top, middle, bottom, text-top, text-bottom)

  • Aspect ratios

  • Visibility

  • Close icon

  • Screenreaders

  • Colours

  • Background colours

Gutters

Gutter classes are available across all breakpoints with the same sizes as the margin and padding spacing classes.

Change horizontal gutters with .gx-* classes, vertical gutters with .gy-*, or all gutters with .g-* classes. .g-0 xis also available to remove gutters.

  1. https://getbootstrap.com ↩︎

  2. https://www.w3schools.com/bootstrap4/default.asp ↩︎

  3. https://www.w3schools.com/bootstrap5/index.php ↩︎

  4. https://www.w3schools.com/bootstrap5/bootstrap_utilities.php ↩︎

Related Pages