Intro to bootstrap with basic layout example

This is a basic bootstrap tutorial for those who are new to web development or just starting to use bootstrap.

Bootstrap is the most popular HTML, CSS, and javascript framework for developing responsive, mobile first projects on the web.
The power of bootstrap lies in your understanding of the built in pre-defined classes. With the right classes being efficiently used, it will make your layout structuring easier and faster.

Visit bootstrap for a full study of this framework

Usage:
To be able to use bootstrap you have to download the framework which will contain, the bootstrap css, javascript and the needed fonts.
you can download it here

Once you have the bootstrap downloaded, it will be in zip format unzip the folder and add it to the root of your project folder then you can reference the bootstrap files in your folder for the bootstrap classes to take effect.
Your folder should now look like this:

And this is how the project structure will look once it is added to the project

Each of the bootsrap folders, css, fonts and js contains the files required for each bootstrap component to work if needed, for this project I only required the css and js functionalities that is why I didn’t reference the fonts.
You can now reference the bootstrap files required in your project header section.

Notice the red script included before adding the bootstrap JavaScript, this is included because bootstrap requires JavaScript to be initially loaded for it’s JavaScript functionalities to function properly
The built in classes covers functionalities and styling for rows, columns, forms,tables,buttons,icons, sliders, modals (a pop up view that shows on the screen in an action is performed on another item e.g. clicking on a div or button), And other features. Using html css and JavaScript so you can see how much you can achieve with bootstrap with less work.

for this tutorial, we will be working with a basic portfolio page as shown below.

The layout above was designed with bootstrap, as you can see each component is carefully arranged and if you place it on a mobile screen it will automatically rearrange the page to fit the screen size.
Let’s highlight each section as used with the bootstrap grid system, the grid system specifies that each row is made up of 12 columns.

With this in mind you can structure the web page in sets of rows and columns, you can also have rows inside columns.
The columns are usualy specified with respect to screen sizes such as lg(large), md(medium), sm(small) and xs(extra small)

You can check out the bootstrap grid system here

let’s break down the portfolio page above into rows and columns for a clearer understanding.

The above structure is only a basic layout structure but if you can understand this approach you will be able to approach more complicated and larger designs, all you need is being able to identify each component as on the actual design and assign their classes. This will make your work much faster.
Here is the html for the entire design using bootstrap, some of the inner classes which I couldn’t specify on the above figure due to the space are included here, like the projects description modals which are supposed to pop up on click of each project.

Code:
I have included the entire html for the above layout should in case you need to use it, you copy and paste then add additional features to your portfolio.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Portfolio</title>
       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Lato:100,300' 
              rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Lato:400,700italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="style.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    
    <script src="js/bootstrap.min.js"></script>
    </head>
    
    
    <body>
<div class="navbar navbar-inverse navbar-fixed-top">
  
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" id="logo" href="#"><span id="obele">Your logo here</a>
    </div>

    
    <nav class="collapse navbar-collapse" id="menuDiv">
      <ul class="nav navbar-nav navbar-right menu">
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

Intro to bootstrap with basic layout example | Ecency