Complete 2024 Web Development Bootcamp

Dr. Angela Yu

Back to Bootstrap Index Page

 

Bootstrap Components
Intro

Bootstrap components are pre-built modules that we can include within our website design with minimal coding. There is a whole host of components we can utilize including Buttons, Breadcrumbs, Accordions, and many, many more. There is a complete list on the Bootstrap Docs page. Just look under the index on the left hand side inder Components.

This is not meant to be a deep-dive into ALL of the available Bootstrap components. We are simply going to discuss some of the more common, and more useful ones. One last note is to remember that all Bootstrap designations, are created using Bootstrap class.

Colors

The first thing we should learn about is Bootstrap's Colors. Bootstrap has it's own color definitions which are accessed by using the defining name. Here is a list of the Base Theme Colors:

Primary
Success
Danger
Secondary
Warning
Info
Light
Dark

You are not limited to these Base Theme Colors. A complete color list can be found here.

The way that these colors work is that you create a component that you wish to use such as text, or button and give it the -color extension. Here's a couple of examples:

  • text-dark
  • bg-primary
The first example is going to make the text color black. And the second example is going to make the background color the blue color.

Buttons

Buttons are created using the btn class, like so:

  • <button type="button" class="btn btn-success">Button Text</button>
This will create a green button, like so: Under the class section, we are designating it as a button class, (btn) and giving it the green background color (btn-success). It is very important that you designate the type="button" as this tells bootstrap to identify this as a clickable button.

Cards

Bootstrap cards are a flexible and extensible content container. They include options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. More information on cards can be found here.

We're going to define a basic card, like so:

  • <div class="card" style="width: 18rem;">
    • <img src="..." class="card-img-top" alt="...">
    • <div class="card-body">
      • <h5 class="card-title">Card title</h5>
      • <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      • <a href="#" class="btn btn-primary">Go somewhere</a>
    • </div>
  • </div>
Notice that this is just an example so we do not have an image, or hyperlink defined. As the code is written, we would get:

...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Navbars

Another very useful Bootstrap Component is a navbar. An in-depth look at navbars can be found here.

Let's look at an example from the docs page:


and the code:

  • <nav class="navbar navbar-expand-lg bg-body-tertiary">
    • <div class="container-fluid">
      • <a class="navbar-brand" href="#">Navbar</a>
      • <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        • <span class="navbar-toggler-icon"></span>
      • </button>
      • <div class="collapse navbar-collapse" id="navbarNav">
        • <ul class="navbar-nav">
          • <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
          • <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Features</a></li>
          • <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Pricing</a></li>
          • <li class="nav-item"><a class="nav-link disabled" aria-disabled="true">Disabled</a></li>
        • </ul>
      • </div>
    • </div>
  • </nav>

Move It

There are too many Bootstrap Components to try and describe in detail here, but we're going to create a website front page for a fictional Moving Company called Move It. We


Back to Top