Web Design

Bootstrap

Using the Bootstrap CSS Framework

CSS Frameworks

Most of the time, when designing a website, developers will use a CSS Framework. There are tons of frameworks to choose, Bootstrap, Tailwind, Bulma, and more. We will be using Bootstrap.

Setting up Bootstrap

Go to getbootstrap.com, click on Documentation, then go to Introduction and copy the CSS. Paste it into the header. Below might not be the latest version, so please double check.

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
</head>

Getting the layout setup

Bootstrap has a lot of components to use, which we will go over in the next lesson, but let’s go over a few basic parts.

Nested Elements

Bootstrap has many elements made up of divs. This means that nested elements are needed. Inside our body, lets create a div with the container class.

<body>
    <div class=”container”>
    <!-- STUFF GOES HERE -->
    </div>
</body>

Comments

You can use comments to explain your code, which can help you when you edit the source code at a later date. Comments do not show up in your browser when you load the HTML page. To create comments in HTML, just use:

<!-- THIS IS A COMMENT
IT WORKS ACROSS MULTIPLE LINES -->

To create comments in CSS, just use:

/*THIS ALSO WORKS ACROSS
MULTIPLE LINES*/        

What’s the container?

The container class has its own CSS properties with margins and padding. This evenly spaces out your content based on the viewport(desktop, laptop, mobile ,tablet, smart fridge 😜). Anything you put in here will format perfectly. In the next lesson, we will start creating our page.

chevron_up