Getting started with Bootstrap

3 min readNov 21, 2019

This article is designed to get you started with the basic knowledge of Bootstrap, and guide you on how to add bootstrap to your project.

Prerequisites:

Basic knowledge of HTML , CSS and JS .

Introduction:

Bootstrap is free open-source CSS framework directed at responsive, mobile first front-end web development.

Bootstrap contains a Library of predefined CSS classes and some JavaScript. Using Bootstrap requires giving these class names to our HTML elements and the styles apply. lets just say some group of people already put in a lot of work in writing a lot of CSS classes for us. So all we need to do is to call the right css class names.

Getting Started:

There are few easy ways to get started with. you can add bootstrap to your project by using one of the three methods:

1. Using Bootstrap CDN

CSS

Simply copy this link to the <head> of your HTML file

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JAVASCRIPT

Many of Bootstrap components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and bootsrap’s own JavaScript plugins. Place the following <script>near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then bootstrap JavaScript plugins.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

2. Downloading the files locally

After downloading the file here, you can include bootstrap.min.css file in the <head> and bootstrap.min.js in <body>. Even if you are using the downloaded bootstrap file, you have to include jquery.min.js and popper.min.js before loading bootstrap.min.js.

3. Using package managers

Bootstrap can be easily pulled in to any project using package managers such as ‘npm’, ‘yarn’ etc. Since npm is the most popular package manager used by front end developers, we are going ahead with the npm command for installing bootstrap.

Type the following command in your project folder (assuming you have initialised npm in the project)

npm install bootstrap

This command will download a local copy of bootstrap files inside the ‘node_modules’ folder in your project. You can then include bootstrap.min.css file in the <head> and bootstrap.min.js in <body>. As mentioned in method no.2, you have to include jquery.min.js and popper.min.js before loading bootstrap.min.js.

For the purpose of this article, we will consider adding Bootstrap to a project through a CDN.

Alright!!!!!….enough of the boring stuffs, lets get our hands dirty by building a simple form.

add the following code inside your body tag:

<div class="container">
<body class="text-center">
    <form class="form-signin">
      <h1 class="h3 mb-3 font-weight-normal">sign in</h1>
      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
      <div class="checkbox mb-3">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      <p class="mt-5 mb-3 text-muted">&copy; Mallam Shuaib 2019</p>
    </form>
  </div>

Here we made use of some Bootstrap classes to apply basic styling to HTML elements.

The “container” class, just as the name implies, is given to a container div. The div above houses every other element within the section just like a container.

The “text-center”class centers text.

The class “btn-block” creates block level buttons and span the full width of a parent

The class “btn-lg” is used for making a large button

Conclusion:

I hope you had fun learning a bit about Bootstrap and using it to build a basic form. You can restyle your project from this point and also explore some other bootstrap features that are not covered in this article here.

Take a look at the finished project here.

you can follow me on twitter.