christophervigliotti/bootstrap_5.MD

## bootstrap_5.MD

      
    Raw
  

              bootstrap_5.MD
            
          
    Bootstrap 5

Notes

This is very incomplete.
Alerts


add class="fade" to alert components to give them a sleek fade effect while dismissing the alert box

Breakpoints

"Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap" via https://getbootstrap.com/docs/5.0/layout/breakpoints/
breakpoint          class infix     dim
----------          -----------     ---
x-small             none            0-576px
small               sm              >=576px
medium              md              >=768px
large               lg              >=992px
extra large         xl              >=1200px
extra extra large   xxl             >=1400px

Buttons


class="btn-group" will hold all buttons in an inline group
class btn_block will not work.  use class col-12.

Containers

container           xs      s       m       l       xl      xxl
---------           --      -       -       -       --      ---
.container          540     720     960     1140    1140    1320
.container-sm
.container-md
.container-lg
.container-xl
.container-xxl
.contianer-fuild    100%    100%    100%    100%    100%    100%

Conventions


class="breadcrumb-item-active" - "active" will show that it's the active item
class="bg-danger" - "-danger" is styled red

Grids

Grid is divided into 12 columns
<!-- variable column widths! -->
    <div class="container">
      <div class="row">
        <div class="col-8">
          <div class="box"></div>
        </div>
        <div class="col-4">
          <div class="box"></div>
        </div>
      </div>
    </div>

An example of grids for multiple devices (multiple screen widths rather)
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-8">
            <div class="box"></div>
        </div>
        <div class="col-lg-4 col-md-8">
            <div class="box"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-3">
            <div class="box"></div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="box"></div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="box"></div>
        </div>
        <div class="col-lg-3 col-md-3">
            <div class="box"></div>
        </div>
    </div>
</div>

Aligning Columns to the grid using row classes
<!-- horizontal 
justify-content-start   (aligns to BLAH)
justify-content-center  (aligns to BLAH)
justify-content-end     (aligns to BLAH)
-->
<div class="container">
  <div class="row bg-warning height justify-content-end">
    <div class="col-lg-4">
      <div class="box"></div>
    </div>
  </div>
</div>

<!-- vertical 
align-items-start   (aligns to top of box)
align-items-center     (aligns to vertical center of box)
align-items-end     (aligns to bottom of box)
-->
<div class="container">
  <div class="row bg-warning height justify-content-end">
    <div class="col-lg-4">
      <div class="box"></div>
    </div>
  </div>
</div>

List Groups


class="list-group" can be added to  tag and class="list-group-item" can be added to  tag

Popovers

Popovers will not fire without being initialized.
<div class="bd-example">
  <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script>
  // initalize all popovers on the page (the assumption here is that they querySelector matches)
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })      
</script>

Starter Template

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <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.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Typography

more here https://getbootstrap.com/docs/5.0/content/typography/
Headings

<!-- the normal way to do things -->
<h1>My H1</h1>

<!-- this seems like a bad idea from an accessibity standpoint -->
<p class="h1">My H1</p>

<!-- cute -->
<h1>
  My H1
  <small class="text-muted">With faded secondary text</small>
</h1>

<!-- a bigger and still accessible way to make a heading -->
<h1 class="display-h1">I like this one</h1>