Bootstrap is a “powerful, mobile-first, front-end framework for faster and easier web development.” It is a collection of tools to help you rapidly deploy websites and Web applications. It was created by Mark Otto and Jacob Thornton of Twitter in 2011 and is currently in its fourth iteration. Bootstrap files provide a framework of pre-written CSS and JavaScript from which to develop responsive websites and web applications. It is basically a series of classes that you can use to get a responsive layout easily created for your site.
To use this tutorial’s images, you can download and uncompress this bootstrap.zip folder. Move the folder to the desktop and save an index.html page where you will do the coding in the “bootstrap” folder. You will see an img folder with the images for this tutorial.
Bootstrap is a good tool to use with what you already know about HTML and CSS. The easiest way to get started with Bootstrap is to visit http://getbootstrap.com and click on Get Started. There you can find the Starter template that has links to the required Bootstrap files for CSS and JavaScript in the cloud. Put that code in a file and name it index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
You can also Download the Bootstrap installation that will download the js and css folders on your computer. If you decide to use this method, you drag the bootstrap folder to your computer. Rename the folder to something relevant, and create an index.html page that includes direct links to the css and js files.
There are also many sites that provide Bootstrap templates and this is often the best way to get started with a project. Start Bootstrap has several .
Let’s take a look at a few features of Bootstrap.
Grid
The main Bootstrap Grid layout is based on a fluid grid system that appropriately scales up to 12 columns, depending on the size of the user’s screen. You indicate the size of the div by giving it a class that represents the unit or proportion of 12 that it should occupy. This grid system is shown in the code below:
Containers
Containers are the most basic layout element in Bootstrap and are required when using the default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
<div class="container">
</div>
<div class="container-fluid">
</div>Rows
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
<div class="container">
<div class="row">
<!-- Content here -->
</div>
</div>
Columns
Flexbox allows you to create equal width columns without using numbers to create the 12-column grid. This means you can have any number of columns you need. The responsive breakpoints are used to determine when the layout will stack. Five grid breakpoints are available: extra small, small, medium, large, and extra large. https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints.
For equal width columns, simply use the class names without a relative number within a row div.
<div class="row">
<div class="col-md">Column 1</div>
<div class="col-md">Column 2</div>
<div class="col-md">Column 3</div>
</divThe above will create three columns of equal widths within the parent container. It will break for stacking at the md level, which is 768px. Use col-sm for the new breakpoint at 576 px.
You can use col or col-4 (with a number) to not use breakpoints for stacking.
You can use numbers with the col classes to create unequal widths. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. For example:
<div class="col-md-8">8 unit column</div>
<div class="col-md-4">4 unit column</div>More information about Bootstrap grids at https://getbootstrap.com/docs/4.1/layout/grid/.
When added to <body> of your existing index.html page and opened in a browser, you will see how each div can respond to the size of the browser window. Experiment with different classes and grid combinations.
Navigation
To create a basic Bootstrap Navbar, use the following code in your page where you want to place your navigation. This creates the navbar, makes it responsive and adds a “hamburger menu” at the phone size level. You can change styles for color and background. See https://getbootstrap.com/docs/4.3/components/navbar/ for details.
Navbar placement can be fixed-top, fixed-bottom or sticky-top (scrolls with the page until it reaches the top, then sticks).
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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>
<li class="nav-item">
<a class="nav-link" href="#link1">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link2">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link3">Link 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Dropdown 1</a>
<a class="dropdown-item" href="#">Dropdown 2</a>
</div>
</li>
</ul>
</div>
</nav>
Images
To make an image responsive, use the “img-fluid” class.
You can use “img-thumbnail” to create a thumbnail version of an image and “rounded” to add rounded corners. See the Bootstrap Images page for more information about using images.
The code below will display a responsive image with rounded corners from the img folder.
<img src="img/imagename.jpg" class="img-fluid rounded" />Jumbotron
A Jumbotron creates a large section that can draw attention to the page with a background visual, heading, text and button. Apply a background image to the div and style the text on the screen. https://getbootstrap.com/docs/4.3/components/jumbotron/
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
Note on Background Images: Depending on the content of your background image, you may need to adjust the background-size option. Use background-repeat: no-repeat to prevent the image from repeating. If your background is a pattern, use background-size: cover; if it is an image with specific content that must show in total, use background-size: contain. However, in the contain scenario, you may need to create a media query that changes the size of the text content in the div. Make sure the image is large enough to display without repeating. You may also put a max-width of a specific pixel size to prevent the situation if the window is larger than the image that is not allowed to repeat.
Carousel
A Carousel allows you to create a slideshow on the page. Bootstrap has various features for carousels. The code below includes arrows and indicator buttons.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/filename.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/filename.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/filename.jpg">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
To add captions to each image on the carousel, include the following code within the carousel-item div below the <img> element. Find more examples of Carousel code options on the Bootstrap Carousel page.
<div class="carousel-caption d-none d-md-block">
<h4>My Image Heading</h4>
<p>My image capton</p>
</div>Typography
All HTML headings, <h1> through <h6> are available and can be controlled via CSS. Bootstrap’s global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. And, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).
If you’d like to make a paragraph stand out, add the class .lead.
<p class="lead">This is a paragraph...</p> Many other text classes exist in the bootstrap.css file,
including:
- .text-left
- .text-center
- .text-right
- .text-muted
- .text-primary
- .text-info
- .text-warning
- .text-success
- .text-danger
You can find more information on the Bootstrap Typography page.
Responsive Embeds
When you embed something from another website, like YouTube, you want to also make it responsive. Wrap your embed code in a div with the embed-responsive class. (More at https://getbootstrap.com/docs/4.0/utilities/embed/).
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>Tables
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. Use .table-striped to add zebra-striping to any table row within the <tbody>. More on the Bootstrap Tables page.
<table class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Dale</td>
<td>Blasingame</td>
<td>@daleblasingame</td>
</tr>
<tr>
<td>2</td>
<td>Jon</td>
<td>Zmikly</td>
<td>@jonzmikly</td>
</tr>
<tr>
<td>3</td>
<td>Cindy</td>
<td>Royal</td>
<td>@cindyroyal</td>
</tr>
</tbody>
</table>
Scroll to Anchor
Many Bootstrap sites are one page that includes all the content with navigation links scrolling to sections of the page. To create the anchors on the page, simply include an id in an element and then use the name with the # in the navigation. The id can be applied to any element on the page.
<a class="nav-link" href="#link1">Link 1</a>
<h1 id="link1">
To achieve a “smooth-scrolling” effect on your navigation links, all you have to do is include the following in your CSS.
html {
scroll-behavior: smooth;
}This feature is not yet supported by all browsers. For full browser support, there are JQuery plugins that can be used to achieve a similar effect. See the code below. You can include it in a <script> section at the end of the page below the other script references or in a .js file that is referenced in your html.
<script>
$('.nav-link').click(function(e) {
e.preventDefault();
var sectionTo = $(this).attr('href');
$('html, body').animate({
scrollTop: $(sectionTo).offset().top
}, 1500);
});
</script>To use this script, you can’t use the “slim” version of the JQuery library. Find the current minified version on the JQuery Core site and replace the JQuery reference to use the above script. Remove the scroll-behavior from your CSS if you use this method.
Parallax
A parallax effect allows the background of a section to scroll at a different speed than the rest of the page, creating a animated effect. You must include the data-speed and data-type attributes in the div (or other element) that receives the effect. This is another feature that requires the “non-slim” version of JQuery (see Scroll to Anchor above).
<div class="jumbotron text-light" data-speed="6" data-type="background">
Include the following code in a <script> section at the bottom of the page below the other script references or a separate .js file that is referenced in your code below the JQuery reference. If you apply this to an element other than a <div>, you must change the reference to div in the code below.
<script>
$(document).ready(function(){
// cache the window object
$window = $(window);
$('div[data-type="background"]').each(function(){
// declare the variable to affect the defined data-type
var $scroll = $(this);
$(window).scroll(function() {
// HTML5 proves useful for helping with creating JS functions!
// also, negative value because we're scrolling upwards
var yPos = -($window.scrollTop() / $scroll.data('speed'));
// background position
var coords = '50% '+ yPos + 'px';
// move the background
$scroll.css({ backgroundPosition: coords });
}); // end window scroll
}); // end section function
}); // close out script
</script>Add a Twitter Widget
You can add a Twitter widget to your site by going to the Twitter Publish page and entering a Twitter url. Choose an Embedded Timeline. Customize the size and other options and get the html code it provides. You can include this in a column or sidebar of your site.
There are many other features of Bootstrap that you can apply. Refer to the documentation on the Bootstrap site.