CSS Basics #6: Bootstrap

    Bootstrap is one of the most popular responsive front-end frameworks in the world. Originally created by a designer and a developer at Twitter, it is now maintained by a small team of developers on GitHub.

    In this article, we are going to very quickly go through some of the basics of Bootstrap. Our focus will be on the responsive layout, which is relatively more difficult to understand. Then, we’ll briefly talk about some other components like images, tables and forms.

    How to Use Bootstrap

    The Bootstrap framework is essentially a predefined CSS file, which you can include in your HTML document to help you create beautiful web pages without having to write a single line of CSS code (Of course, you can still have your own CSS if you want). All you need to do is to use the correct class names in your HTML file.

    To use Bootstrap, you can download the compiled code from its official website: Download · Bootstrap v5.0 (getbootstrap.com), and then load the files in your HTML document.

    Or the easier way is to use a CDN like this:

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8" />
      <meta name="author" content="Eric Hu" />
      <title>My HTML Document</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      
      <link rel="stylesheet" href="myCSS.css" />
    </head>
    
    <body>
      <img src="image.jpg">
    
      <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>

    The CSS file should be imported in the <head> section like we talked about before, and the JavaScript file goes before the closing tag of <body> element. Yes, you do need to import JavaScript code for the framework to work properly, but luckily, for now, you don’t need to understand how it works.

    Bootstrap Layout

    Remember we discussed the responsive design? Since Bootstrap is also a responsive framework, the same concept still applies here.

    Containers

    Bootstrap offers several different types of containers based on different break points as listed in this table:

    Class NameExtra small
    <576px
    Small
    ≥576px
    Medium
    ≥768px
    Large
    ≥992px
    X-Large
    ≥1200px
    XX-Large
    ≥1400px
    .container100%540px720px960px1140px1320px
    .container-sm100%540px720px960px1140px1320px
    .container-md100%100%720px960px1140px1320px
    .container-lg100%100%100%960px1140px1320px
    .container-xl100%100%100%100%1140px1320px
    .container-xxl100%100%100%100%100%1320px
    .container-fluid100%100%100%100%100%100%

    For example, the containers with the class name .container-md will have a width of 100% on small and extra small screens, but it will have a maximum width on larger screens.

    .container-md Container on Large Screens
    .container-md Container on Small Screens

    Notice that on small screens, the container stretches to the edge of the browser. However, on large screens, there is a space between the container and the edge of the browser.

    Columns

    This is a typical grid system built with Bootstrap, with one row and two equal-width columns:

    <div class="container">
      <div class="row">
        <div class="col">
          Column
        </div>
        <div class="col">
          Column
        </div>
      </div>
    </div>

    The .row block acts as a wrapper for the columns. If you want a second row, you need to create a new .row block like this:

    <div class="container">
      <div class="row">
        <div class="col">
          Column
        </div>
        <div class="col">
          Column
        </div>
      </div>
    
      <div class="row">
        ...
      </div>
    </div>

    However, what if we don’t know how many rows we need? What if we want the rows to be automatically generated? We can use the responsive .row-cols-* classes to quickly set the number of columns that best render our content.

    <div class="container">
      <div class="row row-cols-2">
        <div class="col">Column</div>
        ...
      </div>
    </div>

    We can set the relative width of the column by simply specifying a numbered class:

    <div class="container">
      <div class="row">
        <div class="col-8">col-8</div>
        <div class="col-4">col-4</div>
      </div>
    </div>

    The columns can be responsive as well, based on different breakpoints as listed in this table:

    xs
    <576px
    sm
    ≥576px
    md
    ≥768px
    lg
    ≥992px
    xl
    ≥1200px
    xxl
    ≥1400px
    ContainerNone (auto)540px720px960px1140px1320px
    Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-

    For instance:

    <div class="container">
      <div class="row">
        <div class="col-sm">col-sm</div>
        ...
      </div>
    </div>

    In this example, the columns will be vertically stacked on small screens, and horizontally expanded on large screens.

    .col-sm on small screen
    .col-sm on large screen

    Alignment

    Because the Bootstrap grid system is built with flexbox, which we already talked about, the alignment should be very familiar to you.

    To vertically align columns, use the .align-items-* class:

    <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>
      <div class="row align-items-end">
        ...
      </div>
    </div>

    To horizontally align columns, use the .justify-content-* class:

    <div class="container">
      <div class="row justify-content-start">
        ...
      </div>
      <div class="row justify-content-center">
        ...
      </div>
      <div class="row justify-content-end">
        ...
      </div>
    </div>

    Images

    You can make an image responsive by giving it a class .img-fluid.

    <img src="..." class="img-fluid" alt="...">

    This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.

    Bootstrap also allows you to make an image into a thumbnail.

    <img src="..." class="img-thumbnail" alt="...">
    Image Thumbnail

    You can align images using the float class like this:

    <img src="..." class="float-start" alt="...">
    <img src="..." class="float-end" alt="...">

    Tables

    Since the <table> element is used in many scenarios and you obviously don’t want all of them to have the same style, the Bootstrap tables are opt-in. To use the Bootstrap style, you have to give the <table> element a .table class.

    <table class="table">
      ...
    </table>

    You can make your table stands out by giving it striped rows:

    <table class="table table-striped">
      ...
    </table>

    Or if you are building a dark themed web page, a dark-themed table might be a better choice:

    <table class="table table-dark table-striped">
      ...
    </table>

    And finally, it is possible to make a table responsive on all devices by wrapping it inside a <div> block that has a .table-responsive class. If the table is being displayed on a device that is too small, a scroll bar will appear automatically.

    <div class="table-responsive">
      <table class="table">
        ...
      </table>
    </div>

    Other Components

    The other topics in Bootstrap are very easy to understand. In fact, for the most part, all you need to do is go to the official documentation, copy the code, and use it as your own. So, instead of going into details, let’s just look at some examples.

    Bootstrap Form

    <form>
      <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
      </div>
      <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    Buttons

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    Navbar

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>

    Pagination

    <nav aria-label="Page navigation example">
      <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
    </nav>

    Leave a Reply

    Your email address will not be published. Required fields are marked *