Up by Your Bootstrap

Making web pages attractive is its own art form that people spend years mastering, but most people can’t afford to spend year nitpicking in their CSS file, and others, well, just hate dealing with CSS. That’s where a tool like Bootstrap comes in to make your life easier.

Bootstrap is a CSS framework originally developed internally at Twitter and then later released as open source. It enables quick, responsive, and attractive styling. It does this by offering convention-based layouts and components that adjust to different media sizes and by default have a modern appearance. As a framework, it still leaves plenty of room to infuse your own creativity and customization into your pages; however, it’s also a robust enough toolset that you can easily use it’s components and utilities to completely style your pages without ever needing to write your own CSS.

Bootstrap was designed to be incredibly simple to setup and use, and the docs for it are extensive, but I’ll still go over the basics of to setup and implement the framework. I’ll also go over how Bootstraps layout system works, some of the common components, and how to customize with utilities. All you need to know to start is the basics of structuring HTML.

Bootstrap primarily works by modifying an html file with preconfigured CSS stylings, so to start you’ll need a project with an HTML file to modify. Then you have two options for integrating the tools into your project. You can either include a link to the Bootstrap files within a script tag at the head of your HTML file or you can download the sources files from their website.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Generally, the script tag method is the simplest way to access Bootstrap; however downloading the files locally allows access even when the CDN isn’t available, like when you’re offline or if the CDN is down.

Now that your HTML file is connected to Bootstrap, you can apply style options to your elements by assigning them class attributes. The first thing you’ll want to do is start building the layout of your page using Bootstrap’s grid system. According to the grid system, a pages layout consists of containers, which consist of rows, which consist of columns. Following this convention assists Bootstrap in aligning your items on the page responsively.

<div class="container">
  <div class="row">
    <div class="col">
      This is the first column of the first row
    </div>
    <div class="col">
      This is the second column of the first row
    </div>
    <div class="col">
      This is the third column of the first row    
    </div>
  </div>
</div>

Each column in a row takes up equal with by default and expands according to its content by expanding the whole row, so that the columns alongside it remain aligned.

You can adjust the class of the elements in your grid to justify and align the content in different ways and also to change the width spacing between columns.

Bootstrap offers a wide array of components to spice up your page. The documentation offers examples of the components that includes code you can paste right into your HTML file and tailor to your liking. It’s easy enough to try out any of the components this way, and I encourage you to do so. I think the components you will get the most mileage out of are the navbar, cards, and buttons. Together, these three accomplish page navigation, content highlighting/display, and interactivity.

Once you’ve assembled the basic structure to your page, you can fine tune your grid elements and components using utilities. The utility options are listed in the docs and they let you adjust the properties like color, size, position, and text alignment. Use the docs as a reference to find the appropriate syntax and then add it to the class of the element you want to modify.

With these basic tools you can build very elegant pages very quickly, but if you want to speed up the process even more. Bootstrap has a number of templates that you can use to start. They offer all the HTML files for download, and they’re titled appropriately according to their most common use cases.

There’s a lot more that can be done with Bootstrap, too. The framework can be combined with plugins that allow javascript and jQuery to handle more complex interactions. So once you have the basics down you can look into incorporating events and animations into your page as well. Hope this helped you get started and happy styling!