The Bootstrap Front-End Framework

Bootstrap Styling

       If you are looking for Bootstrap information, I am sure you already know HTML CSS and perhaps some JavaScript. As the title of this post implies Bootstrap is a front-end framework and it is very useful for website development.  In my opinion bootstrap is nothing else than an external stylesheet and an external script. Adding bootstrap to any HTML website is going to help you with all or most of your style needs. You only need to work with the markup of the website. In Bootstrap the class attribute is heavily used for styling purposes.

Current Version of Bootstrap

        At the time of this post the current and most stable version of Bootstrap is Bootstrap 4.5 though Bootstrap 5.0 has already been released. All versions of bootstrap are very similar. I mean if you learn bootstrap 4.5 or 5.0 you will not face any problem when a new version come out.  

    For any framework you use in web development the best reference is the framework documentation found on their website. Tutorials like this one are only quick references. More detailed information can be found in Bootstrap Website.

       HTML Tags along with Bootstrap classes are Bootstrap Components. Let us start learning about them. It’s going to be fun.

Adding Bootstrap to HTML

       Well, it’s very easy to add Bootstrap to your website. You only need to add the stylesheet CDN as the example below shows. Also, if you want some Bootstrap JavaScript Capabilities you can add the script CDN to your HTML. Here you can see the example of the HTML Structure. If you desire to download the stylesheet and script instead of using the CDN you can also do that. Then add your downloaded version to your site.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Bootstrap Components

      As we explained above Bootstrap components are nothing else than any HTML tag accompanied with the Bootstrap class. Let us start with some of them. 

Bootstrap Layout components 

     The most used Bootstrap Layout components in any website that implements Bootstrap are “Containers” and “Grids”

Bootstrap Containers

Containers are sectioning elements. If we add the class container to any <div> as result all children elements of the div will justify to the center. Technically it works with the padding and margin of the section as the example below shows.

Bootstrap Grid Layout

    By now you could think it’s too soon to start with grid layout in bootstrap. This part is only showing how we implement layouts in bootstrap. We use the classes “row” and “col”. By default, grid layout uses a 12-column system. Most times we do not need 12 columns; but layout automatically is divided by 12. For example, if you have a row with three columns every one of them is going to be like 4 units wide as the example below is showing.

Nested Grid Layout

      As you saw the example above the layout system is divided by 12. All the children’s components of the main row can also be divided by 12 using another set of rows and columns inside as we show in the example below. We added some extra style to show the divisions a little bit more. (As you may already know we can add many stylesheets to any website)

Bootstrap Color

In Bootstrap there are six Basic Colors. Most components use them very often in Bootstrap. These colors are Primary, Secondary, Success, Warning, Info, and Danger.  You are going to see how we implement colors in bootstrap components. There are also some other colors Bootstrap uses as “Muted,” “Light,” and “Dark” They are not used as often as the ones we mention above. Sometimes we can use them if we need them.

Bootstrap Text Formatting

    Once you add Bootstrap style to any by default all font families are going to be “Helvetica”. You can change some adding another stylesheet. The example below shows how the 6 headings change in Bootstrap. 

Bootstrap Color Text Formatting

      We can see the six most basic colors of Bootstrap above. Let us start implementing these colors with text. As you can see in the example below, we have some headings with their color text formatted by just adding “text” classes to the component.

     As we already know besides headings there are many other types of text in HTML. The most used are paragraph  “p” tags, and links with the anchor tag “a” here we see how we can format paragraph using the same “text” classes. 

Styling Links in Bootstrap

Links are also text so we can use “text” classes to style them. In the example below we show you how to style links using text classes; but the same example shows that we can style links as buttons using “Button (btn)” classes. Buttons can be configured with the basic colors we have in Bootstrap. The example below shows different ways to style links using Bootstrap. To style links as buttons we need to use two classes. The Button class, and the Button class that will define its color(btn-primary).

Bootstrap Buttons

      As we saw above links can be styled as buttons in Bootstrap. Buttons are buttons so in Bootstrap we use the same classes you above to style buttons. There are also different types of buttons, and you are going to see them below. We also can add the classes of disabled, button small, active, or button large as shown in the example.

Outlined Buttons in Bootstrap

       We can also add outlined buttons in bootstrap using the class “btn-outline” They look very nice. They are not filled with color. They are only outlined as you can see. Once you hover on them you can see the color.

Bootstrap Button Group

   We can also group buttons in a single element. Bootstrap is only style; we choose where we want to place a group of buttons. To create a button group, we only need to add the “btn-group” class to a section and then add the buttons as shown in the example below.

A button group can be also a group of outlined buttons as shown below. 

Bootstrap Button Toolbar

    We already saw many types of Bootstrap buttons. One more type of button configurations in Bootstrap is the Button toolbar. That is nothing else than grouping some buttons under a division or section and applying the class of “btn-toolbar” as we may see in the example below. We can also use the six basic colors  to style buttons. 

Bootstrap Alerts

     Bootstrap alerts are very useful to highlight or clarify any portion of text. We can create them by only adding the class alert to any division or section of HTML. Once we create the alert, we can apply the desired style color as we show in the example.

Bootstrap Nav Bars

    There are two types of nav bars in Bootstrap. The first and most basic configuration is to add the “nav” class to any nav. Once we add the mentioned class, we can add our navigation links. We can also add the basic colors to any nav links. Also colors as light and dark are very useful in nav styling.In the example below we show a simple nav configuration. 

Bootstrap Nav Tabs

   In Bootstrap we can set links in different ways. One way to set links in nav bars is the tabs. You can see the difference of the example above and the one below. Once we hover on the links we can see the different tabs. As we can see the “aria-current” function indicates the current tab page or content.

Bootstrap Navbar

    The second class of navigation bar we use in Bootstrap is the “navbar”. It’s almost like the “nav” class. To create a navbar we just need to add the navbar class to our nav. Using the navbar class we can also add the class “navbar-brand” which serves to display our brand. We can use text or images as brands. The example below shows only text; but you can also add an image using the <img> tag and adding the “navbar-brand” class

Bootstrap List Groups 

   List in Bootstrap looks awesome. It’s very easy to style a list in Bootstrap. Once we have our list under <ul> or <ol> we add the “list-group” class. Then we add the “list-group-item” class to each item on the list and we will have a pretty list result. In the example below we show you an unordered list <ul>. There you see the difference. We are also able to implement Bootstrap basic colors as we may also see in the example

     We can also add the class of “list-group-flush” to remove the rounded corners and side borders of the list as you may see below.

As we also know HTML lists by default are vertical. One item is placed on the top of another item. We can create Horizontal lists using Bootstrap Classes. To create an horizontal list we just need to place the “list-group-horizontal” class as a second attribute for our list. The example below shows how to create an horizontal list.

Bootstrap Ordered List

We can also add style to ordered or numbered lists in Bootstrap. We can accomplish that task by only adding the class “list-group-numbered to our list. You can see the results in the example below.

Tables in Bootstrap

It’s Also possible to style tables in Bootstrap. There are also many ways we can style a table in Bootstrap. In order to style a table in HTML we only need to add the “table” class to any table. In the example below we can see how to style HTML tables with Bootstrap.

Different Table Styles

As we could see above. It’s really easy to style a table with Bootstrap. There are different types of tables in Bootstrap. We are going to see many of them below. One of them is the “striped table”, that we can create using the “table-striped” class. The example below shows how to create an striped table using Bootstrap.

We can also create a bordered table just by adding the class “table-bordered” as seen below.

Another type of table we can create is the hoverable table by just adding the “table-hover” class. That type of table is going to highlight content once we hover on it. As we may see in the example.

It’s also possible to add color classes to tables. We can apply colors to the borders, also to the entire table just by adding the class of the preferred color or the preferred border color. Below we can see how we transform the table to its dark mode by using the “table-dark” class.

Styling Images in Bootstrap

Styling images in Bootstrap is also a very easy task. There are three ways we can style images in Bootstrap. These three ways are fluid, thumbnail, and rounded. Let’s see how it works.

Image Fluid

In Bootstrap and Image fluid is an image 100% responsive. I mean the image is going to be as it is in all devices the website displays it. By adding the “img-fluid” class to any image we can have a responsive image. In the example below we can see how it is.

Thumbnail Image

We are also able to display an image as. a thumbnail using Bootstrap. Adding the class of “img-thumbnail” we can display an image with rounded borders and about 1 Pixel appearance. We also have an example of a thumbnail image below.

Rounded Images

Display rounded images is also a very easy task while using Bootstrap. As their name implies, rounded images have their corners rounded. Adding the “rounded” class to any image accomplishes the task. Another example shows how easy we can do it.

Image Captions in Bootstrap

It’s possible to add captions to any image while using bootstrap. Using the <figure> tag Instead of using only the <img> tag. As we should know the when we use the <figure> is possible to add a caption. To add a nice caption to any image is possible when we add the “figure-caption” class to the <figcaption> tag under the <figure> tag. We can see below how to perform the task.

Styling Forms in Bootstrap

It’s also possible to style any form using Bootstrap. Also is very easy, and we can get really nice looking forms. We are going to start with regular text inputs. Once we create the form we have many text inputs and also a type submit input. In order to add styling to each text input we only need to add the “form-control” class. Inputs type submit are buttons; so we add the desired “btn” class. We also added a “mb-3” class. That means Margin Botton is equal to 3.

Checkboxes

Checkboxes are also possible to style using Bootstrap. We only need to add the “form-check” class to the <div> or the <form> parent. After that we add the “form-check-input” class all the checkboxes. Then we also have the functions of “disabled” and “checked” as you may see in the example below.

Radio Buttons

Using the same classes of “form-check” and “form-check-input” we can style radio buttons. We only need to specify the input is type radio. Now let’s create a replica from the example above changing the input type to radio. The example below shows the difference.

Leave a Reply

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