Bootstrap Notes

This is where I will be keeping some code snippets of some common bootstrap elements I use.

Content

1. Navbar
2. Collapsing Sidebar
3. Toolbar
4. Form Group
5. Colors
6. Dropdowns
7. Modals

Navbar

<section id="navbar">
  <nav class="navbar navbar-expand-lg">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
      <i class='bx bx-menu'></i>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" id="nav-item-home" href="index.php">Home</a></li>
        <li class="nav-item"><a class="nav-link" id="nav-item-new-project" href="new-project.php">New Project</a></li>
      </ul>
    </div>
  </nav>
</section>

Collapsing Sidebar

HTML

<div class="wrapper">

  <nav id="sidebar">
    <ul>
      <!-- sidebar links go here: -->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
      <li><a href="#">Page 4</a></li>      
    </ul>
  </nav>

  <!-- page content goes here -->
  <div id="content">
    <div class="container-fluid">
      <button type="button" onclick="activateSidebar()">View checklists</button>
    </div>
  </div>

</div>

CSS

.wrapper {
   display: flex;
   width: 100%;
   align-items: stretch;
}

#sidebar {
   transition: all 0.2s;
   min-width: 250px;
   max-width: 250px;
   min-height: 100vh;
}

#sidebar.active {
   margin-left: -250px;
}

JavaScript

Add a button so that when clicked it will call activateSidebar().

function activateSidebar() {
  $('#sidebar').toggleClass('active');
}

Toolbar

This is a simple code snippet of a toolbar with a group of buttons on one side, and a search bar on the other.

HTML

<div class="toolbar">
  <div class="buttons">
    <button class="btn btn-secondary">Button</button>
    <button class="btn btn-secondary">Button</button>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
        Dropdown
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>

  <div class="input">
    <input type="text" name="search" class="form-control" placeholder="Search...">
  </div>
</div>

CSS

.toolbar {
    display: flex;
    justify-content: space-between;
}

.toolbar .buttons {
    display: flex;
    justify-content: space-around;
}

.toolbar .buttons > * {
    margin-right: 3px;
    margin-left: 3px;
}

.toolbar .input .form-control {
    width: 100%;
}

Form Group

This is a simple form group that includes an input group.

<div class="form-group">
  <label for="new-email">Email address</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="email" class="form-control" id="new-email" name="new-email">
  </div>
</div>

Colors

Bootstrap offers several utility classes for colors. Here is a link to the offical docs.

Color table

Class Name	Hex

| #007bff | #6c757d | #28a745 | #dc3545 | #ffc107 | #17a2b8 | #f8f9fa | #343a40

Dropdowns

For dropdowns, I usually go with buttons in the menu over links.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <h6 class="dropdown-header">Dropdown header</h6>
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item active" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
    <div class="dropdown-divider"></div>
    <h6 class="dropdown-header">Dropdown header</h6>
    <button class="dropdown-item active" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Modals

Modals are pretty simple.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

There are several event listeners you can use as well.