fbpx

Learn Bootstrap: Complete Guide for Beginners12 min read

Last Updated on

Complete guide to bootstrap for beginners
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email

Table of Contents

Bootstrap is like the technology of another web technology. Intriguing yeah?

Technology is the application of all aspects of science to make life easy for man. Of which HTML and CSS are products. These two languages are very key primary components for building websites and online web spaces. Another tech referred to as a framework however, makes building these websites way less stressful and a chunk more effective. That cool guy that makes that possible is Bootstrap.

In this article, we will be discussing a breakdown of how to really use this cool guy any day, anytime to give our web projects the real cool touch. You know what Bootstrap is now yeah? But then, for formality sake, let’s define it.

What Bootstrap is

Bootstrap is a very effective and powerful front-end framework that helps you build mobile responsive websites more quickly, easily and efficiently. Mobile Responsive websites are sites that are not only very good on desktop view but are also just as catchy and well-laid out on mobile devices too.

You can always create a responsive websiteswith just CSS but then, it gets totally easier and faster with Bootstrap’s pre-coded HTML and CSS based design templates that are uniquely and primarily responsive

 Bootstrap is the most popular and powerful front-end (HTML, CSS, and JavaScript) framework for faster and easier responsive web development and it is also completely free.

Bootstrap was originally created by a designer and a developer at Twitter in mid-2010. Before being an open-sourced framework, Bootstrap was known as Twitter Blueprint. The latest version of Bootstrap is Bootstrap 4.

You could create and customize almost every single feature that you need to appear on your webpage(s) with Bootstrap: forms, buttons, alerts, dropdowns, tabs, navigations, structuring, accordions, tooltips, typography, lists and tables, icons, pagination and so much more; all from the scratch of your standard HTML or on any other existing web pages.

That should wrap up the formalities, shouldn’t it? Now let’s get to proper business!

Prerequisites for using Bootstrap

It’s basically like working with HTML and CSS, you need your <link to any good ide>IDE or Code Editor</link> and your browser.

This breakdown will be very much effective as we move along, if we do have a workable idea about web design already and good understanding of the HTML and CSS. If you don’t have this, check out our article on <link>Introduction to Web Design for Beginners</link>

But if you do have a good idea, crack them knuckles and let’s get to work!

Getting the floor ready for Bootstrap

Bootstrap will work very fine in any HTML structured document as long as it has the standard <html>, <head> and <body> tags. Create an HTML document maybe index.html. To kickoff, you may as well want to write some lines of code in the <body> tag just to have a good environment where any changes will be easily seen, to start off with. So you could as well add some styles to it. Create another document: styles.css; positioned in the same location as the HTML file (not compulsory but makes it easier to reach and load). Add some background colors, change font styles and all. Just to get the stage ready for Bootstrap.

Bring in the cool guy

Now Bootstrap can come in. Just the way you link external stylesheets with your <link> tags positioned in your <head> tags, you can host Bootstrap too the same way. But you have 2 options: Hosting Bootstrap Locally or Loading it through a CDN.

1a) Hosting Bootstrap locally

This means that you download Bootstrap on your local machine (your laptop) and link it with your documents whenever you want to use it. Check out the link to do <link to bootstrap.com>here</link>

Ensure to download all the files completely. After downloading and extracting to your machine, you can always locate the bootstrap CSS file to link. But then, you can prescribe the path directory to the HTML document while inserting. More like,

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

1b) Loading through a CDN

This is another way to bring in bootstrap. The CDN (Content Delivery Network) offers an access path for you to automatically link your page with bootstrap on the internet. This is different from hosting locally that can used without the internet as far as you have downloaded the files. Here, for the bootstrap to load, you need to be connected to the internet. So in the <head> tags as well, you have something like this,

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

It is best and common practice however, to host Bootstrap using the CDN. This way it is easier and faster to load your pages as the browser will have Bootstrap stored in its cache already and wouldn’t have to wait to re-search and re-get. This is the best method for well functional sites that must run on a constant basis by users. Whilst other websites your viewers visit will have bootstrap too, it will be super faster to load your own page as the framework is still stored somewhere in your browser memory.

2) Load Bootstrap JavaScript

Loading this is quite important to get the full functionality of the framework; just to be on the best side. You can load locally or via CD too here. If you had downloaded the Bootstrap and hosted locally earlier, then you should be able to host the JavaScript file too locally. This one goes in the <body> tag, right before the end tag, </body>. We use the <script> tag here. So you have:

<script src="jquery-3.3.1.min.js"></script>

But if you are going the other way, with the CDN, you have:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

3) Round up with the jQuery

It may not be too understandable (for now) but these additions only makes the framework more efficient, so do well to add them all. Loading your jQuery locally after you <link>download</link> will look like this:

<script src="jquery-3.3.1.min.js"></script>

While loading via the internet will look like this:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Right on top of the JavaScript call.

##Overview

So when you’re done bring in the cool guy, if you called them all locally, your codes should look like this:

<! DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<p>Hello World. Here is my first Bootstrap project</p>

<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

If you hosted via CDNs, yours should look like way:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tutorial Sample Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body>
<p>Hello World. Here is my first Bootstrap project</p>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Getting Critical

The effects of the files you have just added may not be too visible yet. Considering how little the contents of your page is for now; except the responsiveness of the entire page that can be verified when you restore the window down and try resizing to a smaller screen similar to the size of  a mobile device. Thus we need to build a more robust content in our HTML.

In CSS, Classes and Ids are used as identifier to style a particular or a group of elements in the HTML document. Since Bootstrap is also a styling and effectiveness framework, it also involves using Classes. So when you want to use Navigations for example, and you want it to display the traditional way of navigations without having to write too many CSS codes, you just use the “Class Name” specified for Navigation (or any other element). It however, must be the right spelling and exact word. Let’s check out some of the great features.

Working with Containers

Containers in Bootstrap are like creating <div> boxes with a special attribute with ordinary CSS. Using the predesigned container templates with Bootstrap is achieved inserting the class name “container” or “container-fluid”.

  • container: has fixed widths applied to it, so there will always be space on both sides of the screen, more like adding padding-left and padding-right.
  • container-fluid:  has the container stretching across the entire width of the screen to cover up those spaces/padding.

For example, if you want a section column of your page to cover the entire screen, you could have:

<body>
<section class = “container-fluid”>
</section>
</body>

Working with Navigations

  • nav-item: represents the class name for each of the items you would like to have in your navigation bar. Like Home, About etc
  • nav-link: represents the link in the navigation items.
  • navbar-expand-md: This denotes at which point the navigation bar expands from vertical or hamburger icon to a full-size horizontal bar. In this case, we have set it to medium screens, which, in Bootstrap, is anything greater than 768px.
  • navbar-nav: The class for the <ul> list element that holds the menu items.
  • navbar-brand: This is where the logo and logo image comes.
  • navbar-toggler: denotes the toggle button for the collapsed menu. The piece data-toggle=”collapse” defines that this will turn to a hamburger menu, not to drop-down, which is the other option. You have to define a data-target with a CSS id (defined by the #) and wrap a div with the same name around the actual navbar element.
  • navbar-toggler-icon: As you can probably guess, this creates the icon users click on to open the menu on smaller screens.

So your codes may look like this:

<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
 <div class="collapse navbar-collapse" id="main-navigation">
 <ul class="navbar-nav">
  <li class="nav-item">
 <a class="nav-link" href="#">Home</a>
</li>
 <li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>

Working with Texts

Using the class name, “description” for each section containing text items, we could organize text to be very readable and responsive. Just as always advised an <h1> tag should exist at most once in your document; where all other headings can have the rest of the <h2> – <h3> tags for readability.

Click, click

Buttons are almost everywhere on every websites. To perform an action: submit, buy, add or anything at all. Buttons are modified with Bootstrap to look like somehow like this:

<button class=”btn btn-outline-secondary btn-lg”>Click Me</button>

  • btn: allows special modern styling of the button like removing the original outline and border and making it more smooth and sharp.
  • -secondary: represents a color
  • -lg: represents the size of the button; Large. The button can also go with –md or –sm which stand for medium and small sized buttons respectively.

Working with Grids

Arrangements of contents to display on the webpage may be quite tricky and tasky, especially when you need to appear in a grid form arranged side-by-side. The general structure of using the pre-defined Bootstrap structure is:

<div class = “container”>
<div class = “row”>
<div class = “col-*-**”></div>
<div class = “col-*-**”></div>
</div>
<div class = “row”>
<div class = “col-*-**”></div>
<div class = “col-*-**”></div>
</div>
</div>
  • row: represents a row of a grid in the web page.
  • col: represents that the <div> is a column on the row.

*: can take any value from –xs, –sm, -md, -lg which mean extra small, small, medium and large respectively. You can use any depending on the content of your <div> and how you want them to be rendered.

**: can take any value from 1-6; but all must amount to 12.

The normal desktop view is structured to have 12 different columns. Thus, the number you add here dictates the amount of columns that a <div> will cover. Such that if you want to create 3 medium sized boxes in a grid, you use something like:

<div class = “col-md-4”></div>

Many more styles you can do with Bootstrap grid system.

These are but a few of the various cool formatting and styling that you can do with Bootstrap; a lot more about forms, tables, images, glyphicons, dropdowns, jumbotron, progress bars and so on. Apart from how easy it is to use, it is almost always recommended these days by every web designer as it is cost-effective and more importantly, very effective in allowing websites and web contents render beautifully on every viewer’s device regardless of the device type.

Various more practical step-by-step tutorials do exist to allow you explore more and learn to use this framework more effectively. Free sites like w3schools.com and tutorialrepublic.com will really help.

You do understand what and how this awesome tool works now?! yeah! Carry on now to dive deep.

Farhan Sodiq

Farhan Sodiq

Sodiq Farhan is presently a computer engineering student of the University of Ilorin and a frontend web developer. As a content developer for a couple of organizations also, Farhan enjoys writing and developing contents that aims at educating individuals about the world of technology and beyond

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Business Empowerment Program

Join Our Business Empowerment Program

Get a website and more from #10,000 only.
Get started now!

Don’t forget to share on Social Media!

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email
Grow your skills

Hey dear, just Before You Leave!

Get Updates To Help You Grow.

We offer more than just services but teach people what we know to help them grow FOR FREE.

We promise not to spam!

Don’t Forget to check our blog/resources hub.