Section 12

Udemy Web Developer Bootcamp Section 12

CSS Framework: Bootstrap

Bootstrap

Bootstrap helps us quickly build responsive websites.

• Components
  Bootstrap gives us access to a bunch of pre-build components that we can incorporate into our own websites.
• Grid System
  Bootstrap also comes with a grid system, which helps us construct our own custom, responsive layouts.

Including Bootstrap & Container

There's a couple of different options for how we include the bootstrap stylesheet and the JavaScript scripts.

One options is to download everything onto our machanic and link to it.

The other option is to use something called a CDN. CDN stands for a content delivery network or distribution network. It's essentially a hosted version of a stylesheet that we can access remotely.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

The other thing we should mention, there are these scripts, these three script text.
That we do need to include, if we want access to every part of bootstrap. So certain components require JavaScript and we can see them here.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

• Container all-in-one
  Containers are the most basic layout element in Bootstrap and are required when using our default grid system.
  So what a container does is that they contain and pad content within them. Basically, it's a quick way to get some space and container content.

  <div class="container">
    <!-- Content here -->
  </div>

• Container fluid
  Container fluid is going to be a full with container and it will spend the entire width of the wiewport.

  <div class="container-fluid">
    ...
  </div>

• Container responsive
  What these will do is allow us to say we want the container to be all the way across the screen 100% wide until you hit the small break point or the large or the extra large.

  <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>

  
  

Bootstrap Buttons

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button class="btn btn-outline-warning">Warning Outline</button>
<button class="btn btn-outline-danger">Danger Outline</button>
<button class="btn btn-outline-info btn-lg">Info Outline</button>
<button class="btn btn-secondary btn-sm">SM Button</button>
<button type="button" class="btn btn-success" disabled>Success Disabled</button>

Bootstrap Typography & Utilities

• Display

  <h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>

• Lead

  <p class="lead">
    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
  </p>

• Blockquotes

  <blockquote class="blockquote">
    <p class="mb-0">Lorem*2</p>
    <footer class="blockquote-footer">Mr. Lorem Ipsum</footer>
  </blockquote>

  
• Utilities

  <h1 class="display-1 text-center text-primary">Bootstrap Playground</h1>

  
  
  

Badges, Alerts & Button Groups

• Badges

  <h2 class="display-4">Buttons <span class="badge badge-success badge-pill">New</span></h2>
  <button class="btn btn-primary">Updates <span class="badge badge-light">9</span></button>

  
• Button Groups

  <h3>Button Groups</h3>
  <div class="btn-group">
    <button class="btn btn-warning">One</button>
    <button class="btn btn-warning">Two</button>
    <button class="btn btn-warning">Three</button>
  </div>

  
• Alerts

  <h3>Alerts</h3>
  <div class="alert alert-danger alert-dismissible fade show" role="alert">
    <h4 class="alert-heading">Oh No!</h4>
    Danger! You are about to end the world as we know it!
    <button aria-label="Close" class="close" data-dismiss="alert">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  
  
  

The Bootstrap Grid

• Grids

  <div class="row">
    <div class="col-2 bg-success">I AM 2 UNITS</div>
    <div class="col-8 bg-danger">I AM 8 UNITS</div>
    <div class="col-2 bg-success">I AM 2 UNITS</div>
  </div>
  <div class="row">
    <div class="col-3 bg-info">I AM 3 UNITS</div>
    <div class="col-6 bg-warning">I AM 6 UNITS</div>
    <div class="col-3 bg-info">I AM 3 UNITS</div>
  </div>
  <div class="row">
    <div class="col bg-primary">I AM AUTO SIZED</div>
    <div class="col bg-secondary">I AM AUTO SIZED</div>
    <div class="col-8 bg-primary">I AM 8 UNITS</div>
  </div>

  
• Responsive Grids

  <h2 class="display-4">Responsive Grid</h2>
  <div class="row">
    <div class="col-md-6 col-xl-3 bg-info">
      Lorem*2
    </div>
    <div class="col-md-6 col-xl-3 bg-success">
      Lorem*2
    </div>
    <div class="col-md-6 col-xl-3 bg-info">
      Lorem*2
    </div>
    <div class="col-md-6 col-xl-3 bg-success">
      Lorem*2
    </div>
  </div>
  ```

col-xl-3

col-md-6

• Responsive images

  <div class="row">
    <div class="col-xl-4 col-md-6">
      <img class="img-fluid"
           src="https://images.unsplash.com/photo-1589595363745-d842812a9db7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
           alt="">
    </div>
  
    <div class="col-xl-4 col-md-6">
      <img class="img-fluid"
           src="https://images.unsplash.com/photo-1511692277506-3be3a7ab1686?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
           alt="">
    </div>
    <div class="col-xl-4 col-md-6">
      <img class="img-fluid"
           src="https://images.unsplash.com/photo-1497206365907-f5e630693df0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
           alt="">
    </div>
  </div>

  col-xl-4

col-md-6
  
  
  

Grid Utilities

• Grid Alignment

  <h2>Grid Alignment</h2>
  <div class="row align-items-center">
    <div class="col-3 bg-danger">
      Lorem*1
    </div>
    <div class="col-3 bg-warning">
      Lorem*3
    </div>
    <div class="col-3 bg-success">
      Lorem*2
    </div>
    <div class="col-3 bg-info align-self-end">
      Lorem*1
    </div>
  </div>

  

• Justify Content

  <h3>Justify Content</h3>
  <div class="row border justify-content-center justify-content-lg-start justify-content-xl-between">
    <div class="col-md-4 bg-primary">
      Lorem*1
    </div>
    <div class="col-md-4 bg-info">
      Lorem*1
    </div>
  </div>

  justify-content-xl-between

justify-content-lg-start

justify-content-center
  
  
  

Bootstrap & Forms

<div class="container">
  <h1 class="display-2">Forms</h1>
  <form action="#nowhere">
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" placeholder="Email">
      </div>
      <div class="form-group col-md-6">
        <label for="password">Password</label>
        <input type="password" class="form-control" id="password" placeholder="password">
      </div>
    </div>
    <div class="form-group">
      <label for="address">Street Address</label>
      <input type="text" class="form-control" id="address" placeholder="923 Chicken Ranch St">
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="city">City</label>
        <input type="text" class="form-control" id="city">
      </div>
      <div class="form-group col-md-3 col-6">
        <label for="state">State</label>
        <select class="form-control" name="state" id="state">
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
        </select>
      </div>
      <div class="form-group col-md-3 col-6">
        <label for="zip">Zip Code</label>
        <input type="text" class="form-control" id="zip">
      </div>
    </div>
    <div class="form-group">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="tos">
        <label class="custom-control-label" for="tos">Sign Me Up</label>
      </div>
    </div>
    <button type="submit" class="btn btn-success">Register</button>
  </form>
</div>

email:col-md-6 zip-code:col-md-3

zip-code:col-6

form-group has a margin.

Bootstrap Navbars

<nav class="navbar navbar-expand-sm navbar-dark bg-primary fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" data-toggle="collapse" data-target="#expandme">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="expandme">
    <div class="navbar-nav">
      <a href="Home" class="nav-item nav-link">Home</a>
      <a href="About" class="nav-item nav-link">About</a>
      <a href="Contact" class="nav-item nav-link">Contact</a>
    </div>
    <form class="form-inline ml-auto">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

ml-auto

navbar-expand-sm

data-target="#expandme"

fixed-top

Bootstrap Icons

<div class="container">
  <h1 class="display-1 text-primary">Icons <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-music-note-beamed" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z" />
    <path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z" />
    <path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z" />
    </svg></h1>
  <button class="btn btn-lg btn-danger">Delete <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
    </svg></button>

  <div class="row">
    <div class="col-md-4">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />
            <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />
            </svg></span>
        </div>
        <input type="text" class="form-control" placeholder="Search">
      </div>
    </div>
  </div>
</div>

Other Bootstrap Utilities

• Border

  <div class="row">
    <div class="col-md-4 border rounded border-success shadow">
      Lorem*2
    </div>
  </div>

  
• Padding

  <div>
    <button class="btn btn-primary p-0">Padding 0</button>
    <button class="btn btn-primary p-1">Padding 1</button>
    <button class="btn btn-primary p-2">Padding 2</button>
    <button class="btn btn-primary p-3">Padding 3</button>
    <button class="btn btn-primary p-4">Padding 4</button>
    <button class="btn btn-primary p-5">Padding 5</button>
  </div>
  <div class="my-5">
    <button class="btn btn-primary p-0 pt-5">Padding Top</button>
    <button class="btn btn-primary p-0 pl-5">Padding Left</button>
    <button class="btn btn-primary p-0 pb-5">Padding Bottom</button>
    <button class="btn btn-primary p-0 pr-5">Padding Right</button>
    <button class="btn btn-primary p-0 px-5">Padding X</button>
    <button class="btn btn-primary p-0 py-5">Padding Y</button>
  </div>

  

  <button class="btn btn-danger p-0 p-sm-1 p-md-2 p-lg-3 p-xl-5">I CHANGE!</button>