Introduction to Bootstrap5

Lecture 05

Introduction to Bootstrap5

Bootstrap is a free and open-source CSS and JavaScript / jquery code library used to create mobile friendly website layouts and apps. Bootstrap is a famous front-end framework with a decent variety of pre-defined CSS codes. Bootstrap 5 is the most recent and stable version of the Bootstrap framework. Bootstrap is responsive by default, and it takes a mobile-first approach. Bootstrap 5 is compatible with the most recent, stable releases of all major browsers and systems. Bootstrap 5 is the most recent version of the most popular HTML, CSS, and JavaScript framework for constructing responsive, mobile-first websites, Bootstrap.

Bootstrap sample code

Bootstrap sample code for practice

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Taleem Dunya!</title>
  </head>
  <body>
    <h1>taleemdunya.com</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  </body>
</html>

Columns in bootstrap

In bootstrap, every row is divided into 12 equal parts. Its provide mobile friendly and all device responsive design framework to manage html them on all devices.

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.

Responsive containers

Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will scale up with md, lg, xl, and xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Fluid containers

In bootstrap use .container-fluid class for a full width container, spanning the entire width of the viewport.

<div class="container-fluid">
 <h2>Taleem Dunya</h2>
 <h3>Ahmad Raza</h3>
</div>

Utilities for layout

For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
Bootstrap is built with flexbox, but not every element’s display has been changed to display: flex as this would add many unnecessary overrides and unexpectedly change key browser behaviors. Most of our components are built with flexbox enabled.
Use the margin and padding spacing utilities to control how elements and components are spaced and sized. Bootstrap includes a six-level scale for spacing utilities, based on a 1rem value default $spacer variable. Choose values for all viewports (e.g., .me-3 for margin-right: 1rem in LTR), or pick responsive variants to target specific viewports (e.g., .me-md-3 for margin-right: 1rem —in LTR— starting at the md breakpoint).

Lecture 05