Bootstrap - Minimal

   
   
 bootstrap  css  
 frontend  
Article Series

This article series contain few sections.

Supplementary Article for Sass.

Download Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Using Bootstrap for the first time

1: Layout

No. We do not use Bootstrap yet. We need to talk about something more fundamental.

The Document: HTML Skeleton

This tutorial use header, main, and footer. There is html5 semantic tag for this. But this could be as simple as html element below.

<!DOCTYPE html>
<html>

<head>
  <title>Your mission. Good Luck!</title>
</head>

<body>

  <!-- header -->
  <p><i>Your mission, should you decide to accept it.</i></p>
  <br/>

  <!-- main -->
  <div>
    <p>To have, to hold, to love,
    cherish, honor, and protect?</p>

    <p>To shield from terrors known and unknown?
    To lie, to deceive?</p>

    <p>To live a double life,
    to fail to prevent her abduction,
    erase her identity, 
    force her into hiding,
    take away all she has known.</p>
  </div>

  <!-- footer -->
  <br/>
  <p><i>As always, should you be caught or killed,
  any knowledge of your actions will be disavowed.</i></p>

</body>

</html>

Open this html artefact in any browser, using your favorite file manager. And have a look at the result.

html: layout

2: Loading CSS

There are some alternative to load CSS.

For this tutorial. I suggest to use local CSS. Because we are going to make a custom Bootstrap CSS

Using CDN Bootstrap CSS

It is as simple as

  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous">

And if you need the javascript, you can add:

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" 
          integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
          crossorigin="anonymous"></script>

Directory Preparation

Now consider create directory for respective assets:

  • css

  • js

Bootstrap: Directory Preparation

We only need css directory for the rest of this chapter. But later we need other directory as well such as images, js, and sass. The js part is only needed for navbar.

Using Local Bootstrap CSS

You need to download bootstrap.css first from the official site. And put the artefact to css directory.

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

And the bootstrap.css is here:

Adding Meta

As the official guidance said. We have to add a few tag on the head.

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Your mission. Good Luck!</title>

3: Bootstrap: Example Class

Now consider having fun for while. And give more example class, and see what happened.

List Group

We need to see if Bootstrap class work correctly. Consider add this container and list-group class.

  <div class="container">
    <!-- header -->
    <p><i>Your mission, should you decide to accept it.</i></p>
    <br/>

    <!-- main -->
    <ul class="list-group">
      <li class="list-group-item">
      To have, to hold, to love,
      cherish, honor, and protect?</li>

      <li class="list-group-item">
      To shield from terrors known and unknown?
      To lie, to deceive?</li>

      <li class="list-group-item">
      To live a double life,
      to fail to prevent her abduction,
      erase her identity, 
      force her into hiding,
      take away all she has known.</li>
    </ul>

    <!-- footer -->
    <br/>
    <p><i>As always, should you be caught or killed,
    any knowledge of your actions will be disavowed.</i></p>
  </div>

The Preview

And have a look at the result by opening the file in Browser.

css: bootstrap

There is more fun than just this. We are going to explore later.

4: Bootstrap: Navbar Class

For the rest of this show case, I’m using both navbar header and footer.

As Header

Navbar lies on header part.

  <!-- header -->
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">
            Home <span class="sr-only">(current)</span></a>
        </li>
      </ul>
    </div>
  </nav>

Navbar also lies on footer part.

  <!-- footer -->
  <footer class="footer">
    <div class="bg-dark text-light text-center">
      &copy; 2020.
    </div>
  </footer>

Additional CSS

To have proper layout, this navbar require additional CSS.

.layout-base {
  padding-top: 3rem;
  padding-bottom: 2rem;
}

And for the sticky footer. I grab from the official site.

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

You should define styles on <head> element.

  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <link rel="stylesheet" type="text/css" href="css/sticky-footer.css">

Screenshot

And have fun with the result. Consider open the file in Browser form file manager.

css: navbar

5: Summary

As a summary from this chapter, all the html element is as shown below.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Your mission. Good Luck!</title>

  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <link rel="stylesheet" type="text/css" href="css/sticky-footer.css">
</head>

<body>

  <!-- header -->
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">
            Home <span class="sr-only">(current)</span></a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- main -->
  <div class="layout-base">
    <main role="main" class="container">
      <ul class="list-group">
        <li class="list-group-item">
        To have, to hold, to love,
        cherish, honor, and protect?</li>

        <li class="list-group-item">
        To shield from terrors known and unknown?
        To lie, to deceive?</li>

        <li class="list-group-item">
        To live a double life,
        to fail to prevent her abduction,
        erase her identity, 
        force her into hiding,
        take away all she has known.</li>
      </ul>
    </main>
  </div>

  <!-- footer -->
  <footer class="footer">
    <div class="bg-dark text-light text-center">
      &copy; 2020.
    </div>
  </footer>

</body>

</html>

What is Next ?

There are, some interesting topic about Navigation Bar in Bootstrap. Consider continue reading [ Bootstrap - Navigation Bar - Class ].

Thank you for reading.