Bootstrap

Bootstrap

WHAT IS BOOTSTRAP ?

  • Bootstrap is the world’s most popular framework for building responsive, mobile-first sites and applications. Inside you’ll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever.
  • Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
  • Bootstrap can be boiled down to three main files:

bootstrap.css – a CSS framework

bootstrap.js – a JavaScript/jQuery framework

glyphicons – a font (an icon font set)

BOOTSTRAP HISTORY:

  • Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.

In June 2014 Bootstrap was the No.1 project on GitHub!

BOOTSTRAP VERSIONS:

  • With Bootstrap 2,It includes the responsive functionality to the entire framework as an optional stylesheet.
  • Wth Bootstrap 3,The library are rewritten once more to make it responsive by default with a mobile first approach.
  • Bootstrap 4 is the newest version, which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

Building a Basic Template with Bootstrap:

Bootstrap comes with a few very simple examples to start from, but it’s just as easy to start from “scratch”, so that’s what we’ll do. First, I’ll use only Bootstrap to lay out the foundation, then we’ll add our own custom style on top to make something fun and trendy.

Step one is to download Bootstrap. The zip file will come with css,fonts, and js directories. Unzip that and save the files in some directory. Bootstrap doesn’t come with any HTML,so we’ll use that as index.html.

Hello, World!

<!DOCTYPE html>

<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>Bootstrap 101 Template</title>

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

</head>

<body>

<h1>Hello, world!</h1>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

<script src=”js/bootstrap.min.js”></script>

</body>

</html>

Easy enough to start. We have our basic doctype,html,head and body tags. The meta name=”viewport” tag is particularly important for responsive design – it ensures that your website has a 1:1 ratio with the viewport (screen size).

Beyond that, we’re just adding Bootstrap core CSS in the <head>…

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

jQuery via Google CDN before the closing </body> tag.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

and Bootstrap core JavaScript.

<script src=”js/bootstrap.min.js”></script>

Bootstrap JavaScript and custom JavaScript must go below jQuery to function! Additionally, we can link to jQuery via Google’s URL because it reduces load on our live server, but you can download it if you want to work locally.

 

Navigation Bar:

Although we have nothing, in no time at all we can get copying and pasting from the docs and have a nice, functioning website. First and foremost, we add in the quintessential Bootstrap top navigation bar. I made a simplified version of their navbar example. Place this code right below your opening <body> tag.

<nav class=”navbar navbar-inverse navbar-static-top”>

<div class=”container”>

<div class=”navbar-header”>

<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ aria-expanded=”false”>

<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” href=”#”>Balance Web Development</a>

</div>

<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>

<ul class=”nav navbar-nav navbar-right”>

<li><a href=”#”>About</a></li>

<li class=”dropdown”>

<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>Services<span class=”caret”></span></a>

<ul class=”dropdown-menu”>

<li><a href=”#”>Design</a></li>

<li><a href=”#”>Development</a></li>

<li><a href=”#”>Consulting</a></li>

</ul>

</li>

<li><a href=”#”>Contact</a></li>

</ul>

</div>

</div>

</nav>

It seems like a confusing mess, but it’s not so complicated. In the first line, I’m defining the entire bar as a navbar, choosing a dark color scheme with navbar-inverse, and electing to use navbar-static-top, as opposed to a fixed (sticky) header.

<nav class=”navbar navbar-inverse navbar-static-top”>

A container sets a max-width on the content within your full-width navbar.

<div class=”container”>

The navbar-header class contains the “brand” information, where you can put your logo or company name. We’re making a website for fictional tech company Balance Web Development (well, it’s better than their old site!).

The button is hidden on desktop, and becomes a dropdown hamburger menu on mobile (each <span class=”icon-bar”> is a line in the hamburger).

<div class=”navbar-header”>

<button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″ aria-expanded=”false”>

<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” href=”#”>Balance Web Development</a>

</div>

The rest of the code is a right-aligned unordered list that servers as both our desktop and mobile menu.

 

Jumbotron Header:

I decided I want one of those big, space-wasting, attention-grabbing headers, which is called a jumbotron in Bootstrap terms. Not much to see here, just a jumbotron with a containerand some copy.

<div class=”jumbotron”>

<div class=”container”>

<h1>Ready. Set. Code.</h1>

<p>Are you ready to boilerstrap your cross-compatible buzzword? We’re Sassy, flat and semantic, so what are you waiting for?</p>

<br>

<p><a class=”btn btn-primary btn-lg” href=”#” role=”button”>Download Free Trial »</a> <a class=”btn btn-primary btn-lg” href=”#” role=”button”>Learn more »</a></p>

</div>

</div>

There’s some extra space we don’t want, but I want to see how far Bootstrap can get us without overriding styles. As you can see, we already have a pretty nice, adaptable layout without having written a single line of CSS.

Grid:

The last thing I’ll do is add in some main content, which will be be in the form of a grid. Grids are rows…

<div class=”row”>

</div>

that contain columns.

<div class=”row”>

<div class=”col-md-6″></div>

<div class=”col-md-6″></div>

</div>

Bootstrap works on a 12-column system, so as long as you add up to 12, you’re golden. The above example will contain two 50% width columns (6/12), which will stack on mobile and become 100% width.

<div class=”container”>

<div class=”row”>

<div class=”col-md-4″>

<span class=”glyphicon glyphicon-cloud” aria-hidden=”true”></span>

<h3>Cloud Computable</h3

</div>

<div class=”col-md-4″>

<span class=”glyphicon glyphicon-floppy-disk” aria-hidden=”true”></span>

<h3>Backwards Compatible</h3>

</div>

<div class=”col-md-4″>

<span class=”glyphicon glyphicon-console” aria-hidden=”true”></span>

<h3>GUI Free</h3>

</div>

</div>

</div>

Here you can see I have three four-of-twelve columns, and as 3 x 4 = 12, everything works out.

Icons:

I’ve also added in a few glyphicons for decoration.Glyphicons is the built-in icon set that comes with Bootstrap. If you don’t load your fonts, or if you move them to a different directory, these icons won’t work.

<span class=”glyphicon glyphicon-floppy-disk” aria-hidden=”true”></span>

Using a glyphicon will always be that same code, and only the glyphicon-floppy-disk class will change.

I am now satisfied with the foundation of my layout.

Adding Custom Styles to Bootstrap:

Not bad for getting this far without touching a line of style. It’s professional, responsive, and browser friendly. It’s definitely not creative or unique, though. After laying down a foundation, you’ll want to add your own personal design.

If you know LESS or Sass, you can play around in Bootstrap’s extensive customization area and download your own version of Bootstrap.Fortunately, you can just add an additional stylesheet below Bootstrap’s core

Don’t modify the Bootstrap core – you’re much better off overriding the existing styles.

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

<link href=”css/custom.css” rel=”stylesheet”>

<link href=’https://fonts.googleapis.com/css?family=Montserrat:400,700′ rel=’stylesheet’ type=’text/css’>

I added a link to a Google font called Montserrat. If you’ve never used a Google Font before, all you have to do is add the font stylesheet to your head and change the font-family of your desired element.

Now we finally begin styling. In just a few minutes, I’ll be able to transform my boring, generic Bootstrap layout into a fun, flat layout. First, I’m going to get rid of that pesky space between the navbar and the jumbotron.

 

.navbar {

margin-bottom: 0;

}

A few simple styles to the main tags. I’m loading in the Montserrat font on the entire page, I’ve made the headers bold, and I’ve made the background dark and the text light.

body {

background: #3E4649;

color: #f7f7f7;

font-family: ‘Montserrat’, sans-serif;

}

h1,

h2 {

font-weight: bold;

}

p {

font-size: 16px;

color: #cdcdcd;

}

I’m going to make the jumbotron green and centered.

.jumbotron {

background: #27A967;

color: white;

text-align: center;

}

.jumbotron p {

color: white;

font-size: 26px;

}

I’m going to turn the buttons into “ghost buttons”, which are buttons that are transparent with a border. I’m also adding a margin so they’ll stack properly on mobile.

.btn-primary {

color: #fff;

background-color: transparent;

border-color: white;

margin-bottom: 5px;

}

.btn-primary:hover {

color: #27A967;

background-color: white;

border-color: white;

}

I’m going to make the navbar a different shade of dark, make the links lighter, and change the background color on hover.

.navbar-inverse {

background: #2E2F31;

border: 0;

}

.navbar-inverse .navbar-nav li a {

color: #f7f7f7;

font-size: 16px;

}

.navbar-inverse .navbar-nav li a:hover {

background: #27A967;

}

The dropdown menu has its own classes, so I’m also going to change the background color on these and add a little padding.

.dropdown-menu {

background: #2E2F31;

border-radius: 0;

border: 0;

}

.dropdown-menu li a {

padding: 10px;

}

.navbar-inverse .navbar-nav .dropdown-menu li a:hover {

background: #2C463C;

}

Back in my HTML, I’m going to wrap a section tag around my grid, and call it call-to-action. I’m also going to create a glyphicon-large class and add it to each icon span.

<section class=”call-to-action”>

<!– .rows and .columns –>

<span class=”glyphicon glyphicon-cloud glyphicon-large” aria-hidden=”true”></span>

<!– /.rows and .columns –>

</section>

The final touches to my code are going to be centering the bottom call-out, adding margin-bottom to the p tags so they stack properly on mobile, and making my glyphicons bigger.

.call-to-action {

text-align: center;

}

.call-to-action p {

margin-bottom: 30px;

font-family: sans-serif;

}

.glyphicon-large {

font-size: 100px;

}

Conclusion:

This is hardly scratching the surface of what Bootstrap is capable of – but you can take it from here.I would encourage you play around and make your own framework for personal projects to aid in your understanding of responsive design.