Add Bootstrap to an HTML Page

Learn how to structure web pages and add Bootstrap to an HTML page.

We'll cover the following

Introduction to HTML document

To specify the text document within the tag that identifies the structure of web pages, we use a markup language. To better understand and assist with changes in the future, HTML annotates (creates comments for the computer) the text. In the HTML language, tags are used to define the alterations that should be performed on the text.

The structure of an HTML page

Press + to interact
<!DOCTYPE html>
<html>
    <!-- our entire web page goes here -->
    <head>
        <!-- meta information goes here -->
    </head>
    <body>
        <!-- body information goes here -->
    </body>
</html>

Each HTML page has four major declarations:

  • At the root level of every HTML page, the <!DOCTYPE html> declaration indicates the document type and assists browsers in appropriately displaying web pages. It must appear at the top of every page.

  • The html tag represents the root of every HTML page. It works as the container for all other HTML tags.

  • The head tag of an HTML document contains various elements that describe vital information about the webpage, such as the favicon, title, keywords, meta information, and descriptions (which are helpful for SEO). It is used to link CSS and javascript files.

  • The HTML body tag specifies the primary material of the HTML document or the area of the HTML document that will be seen on our web page.

The line that’s wrapped inside the html, head, and body tags is an HTML comment. An HTML comment is a piece of code that the browser will skip when it renders a web page on the screen. However, if we look inside the source code, we’ll still see the comment.

Simple HTML web page

Now, we will create a simple web layout using HTML.

As we can see, the output displayed in the rendered window is the content specified in the body tag. The material given in the head tag is responsible for making our website visible and accessible to the user.

Why do we use Bootstrap?

Bootstrap is a collection of open-source tools for creating responsive websites and online apps. It’s the most popular framework for building responsive websites. It is versatile and straightforward to operate. Its primary advantages are as follows:

  • It maintains broad browser compatibility.
  • It is responsive by design.
  • It provides a uniform format for using reusable components.
  • It is extremely simple to use and comprehend.

Bootstrap 4 link meta information

To link to the Bootstrap 4 stylesheet (or to any stylesheet for that matter), we need to use the HTML link tag. Every link tag has at least a couple of HTML attributes, most notably the rel and the href attributes.

Press + to interact
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    <body>
    </body>
</html>

The HTML link tag is an example of a self-closing HTML tag. This means that there’s no closing tag. It can be seen above. Besides the rel attribute, which describes the type of the resource that the link element links to, we also see the href attribute. The href attribute points to a minified version of all the Bootstrap framework’s styles.

If we open the link in the href attribute directly, it shows as many CSS codes with spaces removed, in the browser. We’ll redirect to the minified Bootstrap code. Minified CSS code is plain CSS with the whitespace removed. This is done to reduce the CSS file size, making it faster to download from the server to a browser. This enhances the user experience while lowering server expenses (which is important on websites with lots of traffic).

We could add more meta information inside the head tag, but for now this is enough. In this chapter, we’ll focus on building the first layout.