Let GenHelm take care of generating the correct Bootstrap structures

Bootstrap CSS and JavaScript provide a lot of capabilities when it comes to building responsive designs, however, knowing what classes and HTML tags to use can be challenging. GenHelm automates the process of building valid Bootstrap syntax to expedite the creation of responsive sites.

Bootstrap Grid Example

Consider the following Bootstrap Responsive Grid example copied from the Bootstrap website.

Sample Bootstrap Grid

In GenHelm, the above HTML can be generated simply by entering the data values into the bootgrid model as shown here:

Bootstrap Grid entry in GenHelm

As with all models, you never maintain the actual HTML by hand. Maintenance is performed by adding and removing rows and columns by interacting with the visualized grid presented by the model.

Bootstrap Navbar Example

Here we show the extended version of a sample Bootstrap Navbar.

Bootstrap expanded menu

The Bootstrap framework takes care of collapsing this menu when the size of the window won't accommodate the expanded navbar. Here we see the collapsed version of the Navbar.

Bootstrap collapsed menu

The problem is that you need a lot of intricate HTML to take advantage of Bootstrap's capabilities as we show below.

<nav class="navbar navbar-expand-xl navbar-dark bg-dark justify-content-end">
<div class="container-fluid"> 
  <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#bootnav" 
  	aria-controls="bootnav" aria-expanded="false" aria-label="Toggle navigation">
  	<span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="bootnav">
  <ul class="navbar-nav ">
   <li class="nav-item">
  	<a class="nav-link active" aria-current="page" title="Return to the home page" 
  		href="https://www.heavydutytarps.com/">Home</a>
   </li>
   <li class="nav-item">
  	<a class="nav-link" title="View your shopping cart" href="https://www.heavydutytarps.com/shop">Shop Online</a>
   </li>
   <li class="nav-item">
  	<a class="nav-link" href="https://www.heavydutytarps.com/product-overview">Products</a>
   </li>
   <li class="nav-item">
  	<a class="nav-link" href="https://www.heavydutytarps.com/tarp-applications">Tarp Applications</a>
   </li>
   <li class="nav-item">
  	<a class="nav-link" href="https://www.heavydutytarps.com/policy-selector">Policies</a>
   </li>
   <li class="nav-item">
  	<a class="nav-link" href="https://www.heavydutytarps.com/about-us">About Us</a>
   </li>
   <li class="nav-item">
  	<a class="nav-link" href="https://www.heavydutytarps.com/contact-us">Contact Us</a>
   </li>
   <li class="nav-item">
  	<a class="nav-link" title="Visit our sitemap" href="https://www.heavydutytarps.com/sitemap">Sitemap</a>
   </li>
  </ul>
 </div>
</div>
</nav>

With GenHelm, you simply need to use the bootnav model to design your Navbar as shown here.

Bootgrid specification

Once again you, as a web developer, never need to look at the actual HTML created by the GenHelm framework. Maintenance is performed by updating the information entered into the bootnav model.

Follow the links below to learn more about using GenHelm to build sites that leverage the Bootstrap framework.

Bootstrap-Oriented Models

  1. bootcar is used to build a Bootstrap carousel.
  2. bootgrid is used to build responsive grids as we have shown above.
  3. bootnav makes it easy to build navbars as we have illustrated.
  4. boottab creates tab controls utilizing Bootstrap.