Responsive Web Design Using Bootstrap 4 and Angular

Miguel Sy

January 14, 2021

What is Bootstrap?
  • The most popular front-end open source toolkit (HTML, CSS, and JS library) in the world
  • Used to quickly design and customize responsive mobile-first sites
  • Latest Bootstrap 4 is dependent on jQuery and Popper.js
  • Supports most mobile devices and desktop browsers
  • Documentation at https://getbootstrap.com

<br/>

What is Responsive Website Design?
  • Design approach that allows websites to respond or adapt to different screens and devices used by the users
  • Allows engineers to create only one website and publish everywhere
  • Aims to deliver an optimal view across a variety of devices and web browsers

<br/>

How to Add Bootstrap in Angular? (2 Ways)
  • Import Bootstrap and JS dependencies via CDN
    • Add Bootstrap CSS import to <head></head>
    • Add JS dependencies scripts to <body></body>

<div> <img class="img-fluid img-width-50" src="https://strapi-saperium.s3.ap-southeast-1.amazonaws.com/bootstrap_image12_e5dfb90727.png"> </div>

  • Install Bootstrap and JS dependencies via NPM and import to angular.json (Recommended)
    • Install Bootstrap and dependencies from NPM repository
      • npm install --save bootstrap
      • npm install --save popper.js
      • npm install --save jquery
    • Import to angular.json

<div> <img class="img-fluid img-width-50" src="https://strapi-saperium.s3.ap-southeast-1.amazonaws.com/bootstrap_image34_275cf49581.png"> </div>

<br/>

Bootstrap Responsive Design Layout
  • Bootstrap Viewport Responsive Breakpoints
    • Corresponds to screen size of device used by the user
    • Measurement unit is in pixels (px)
    • Implemented via media queries in the Bootstrap library
    • 5 breakpoints (sm, md, lg, xl)

<div> <img class="img-fluid img-width-50" src="https://strapi-saperium.s3.ap-southeast-1.amazonaws.com/bootstrap_image21_983c73f9de.png"> </div>

  • Bootstrap Containers
    • Most basic layout element or class in Bootstrap
    • Container classes are usually added to outermost div tag of a website page
    • Required when using default grid system
    • Most layouts do not require nested containers
    • 3 types of container classes
      • .container
      • .container-fluid
      • .container-{breakpoint}
    • Go to https://getbootstrap.com/docs/4.5/examples/grid/#containers to see live demo

<div> <img class="img-fluid img-width-50" src="https://strapi-saperium.s3.ap-southeast-1.amazonaws.com/bootstrap_image1_cfc4f5f364.png"> </div>

  • Bootstrap Grid System
    • Powerful mobile-first flexbox grid used to build layouts of all shapes and sizes
    • Implemented using a series of containers, rows, and columns
    • Twelve column system (rows are divided into 12 slots)
    • Grid Column Options
      • .col-{breakpoint} – takes up all available columns
      • .col-{breakpoint}-{# of columns} – takes up number of columns indicated
      • .col-{breakpoint}-auto – takes up columns based on natural width of content
      • .offset-{breakpoint}-{# of columns} – add offset that takes up number of columns indicated before actual column
    • If more than 12 columns are placed within a single row, each group of extra columns will wrap onto a new line

<div> <img class="img-fluid img-width-50" src="https://strapi-saperium.s3.ap-southeast-1.amazonaws.com/bootstrap_image16_f3dd892b5d.png"> </div>

<div> <img class="img-fluid img-width-50" src="https://strapi-saperium.s3.ap-southeast-1.amazonaws.com/bootstrap_image7_9e52bde9d6.png"> </div>

<br/>

Bootstrap Utilities (Makes Our Lives Easier)
  • Colors: .{text/bg}-{color}
  • Display: .d-{breakpoint}-{none/inline/inline-block/block/table/table-cell/table-row/flex/inline-flex}
  • Float: .float-{breakpoint}-{left/right/none}
  • Position: .position-{static/relative/absolute/fixed/sticky}
  • Sizing
    • Width: .w-{25/50/75/100/auto}
    • Height: .h-{25/50/75/100/auto}
  • Text
    • Alignment: .text-{breakpoint}-{left/center/right}
    • Transform: .text-{lowercase/uppercase/capitalize}
    • Font Weight: .text-weight-{lighter/light/normal/bold/bolder}
  • Vertical Alignment: .align-{alignment}
  • Spacing
    • Margin: .m{t/b/l/r/x/y}-{breakpoint}-{0/1/2/3/4/5/auto}
    • Padding: .p{t/b/l/r/x/y}-{breakpoint}-{0/1/2/3/4/5/auto}

<br/>

Bootstrap Components (Explore on Your Own)
  • Buttons
  • Button Group
  • Card
  • Dropdowns
  • Forms
  • Navbar
  • Popovers
  • Tooltips

<div> <img class="img-fluid img-width-50" class="mb-2" src="https://strapi-saperium.s3.ap-southeast-1.amazonaws.com/bootstrap_image20_02af91d2c7.png"> </div>

<div> <img class="img-fluid img-width-50" class="mb-2" src="https://strapi-saperium.s3.ap-southeast-1.amazonaws.com/bootstrap_image4_839c95ebb7.png"> </div>

<div> <img class="img-fluid img-height-50" class="mb-2" src="https://strapi-saperium.s3.ap-southeast-1.amazonaws.com/bootstrap_image6_d09b07a773.png"> </div>

<br/>

Sample Bootstrap Website

<div> <img class="img-fluid img-width-50" src="https://strapi-saperium.s3.ap-southeast-1.amazonaws.com/bootstrap_image36_49d3f45bbc.png"> </div>

<div> <img class="img-fluid img-width-50" src="https://strapi-saperium.s3.ap-southeast-1.amazonaws.com/bootstrap_image37_78377da6c1.png"> </div>