Nowadays, functionality and versatility are two of the most sought-after traits in website development. While many methods have those traits, it can’t hurt knowing another one for comparison or to expand your horizons. That’s why here I’ll share a Bootstrap tutorial, to help you get started with it as quickly as possible.
Bootstrap is a free front-end framework that uses HTML, CSS, and JavaScript. It’s a unique website development method that prioritizes mobile devices, resulting in responsive website design – great looking sites on all screens.
It first started as a project built by two Twitter engineers but has become a reliable open-source framework for anyone to base their website on.
Bootstrap Is Not As Hard As It Seems
Does my explanation of Bootstrap scare you off a bit? There’s no need to worry. It’s not as hard as you may think it is!
To make it simpler, let’s break down the terms used to describe Bootstrap – these are the features that make it awesome!
- Responsive. The term means that a website’s design and layout will still look great no matter which device you use. It will try to match the resolution of a wide variety of screen sizes, that’s why it’s called “responsive.”
- Mobile-first. Nowadays, most websites can still be viewed on mobile devices. A lot of those websites, however, are usually made for desktop view first, while the mobile version is created next, and often as an afterthought. With Bootstrap, you prioritize how the website will look on mobile – the user experience on mobile devices has a higher priority, as it’s easier to convert it to desktop, rather than the other way around.
- Framework. Bootstrap is a front-end framework. It means you’re able to easily create a site using the tools and elements of the framework – freeing you from having to build everything from scratch.
Now, let’s talk about how it works. It starts with you adding a line of code into your HTML file that’s used to call up the Bootstrap CSS script.
After that, you get to access the many design elements contained in its library of tools to create website “widgets” powered by CSS and JS: multi-column layouts, navigational bars, dynamic tabs, carousels, etc.
Ideally, if you want to use Bootstrap, you need to be at least familiar with basic HTML and CSS (think of them as prerequisites). Don’t worry if you’re not though. This is an introductory guide that’s easy to follow, and Bootstrap itself is quite beginner-friendly. You can learn all three alongside Bootstrap, but it may be a bit more complicated.
Let’s Get Started
Now that I have cleared up some things about the framework, you should be ready to try it out yourself.
In this section, the Bootstrap tutorial will cover the necessary steps of using the framework to create a simple landing page from scratch.
The Pre-Requisites
Before you can start making fancy page customizations, you need to set up Bootstrap for it to function correctly. Here’s how to do it:
1. Downloading Bootstrap
As of writing this Bootstrap tutorial, the latest version of Bootstrap available to download is v4.1.3. You’ll be downloading a series of CSS and JavaScript files that are crucial for website development with Bootstrap.
After you download the file, unpack it and place it on your local drive.
Note: Downloading Bootstrap is only necessary if you wish to do local editing. Otherwise, stick to a CDN – more on that in a minute.
Create a folder you’ll use for this landing page. Inside the folder, create an HTML file using your favorite text editor like Notepad++ or Sublime Text. Name it index.html and don’t forget to set the file extension as HTML. After saving the file, keep it open.
Insert the code snippet shown below inside the index.html file.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> </body> </html>
Done? Then let’s move on to the next step – installing Bootstrap.
2. Installing Bootstrap
For this step, you’ll just be inserting a few additional lines of code – nothing to worry about!
So, to install Bootstrap, there are two methods that you can use: a CDN (Content Delivery Network) or package managers such as NPM and Yarn.
I’ll be using a CDN because of the benefits it offers. Using a CDN stores files on a network, letting your visitors load files from the servers nearest to their location. In other words, it will reduce the loading time.
Now, let’s start installing Bootstrap. First, you have to load the Bootstrap CSS script into your file. Insert the code below in the <head> section.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Then, you must also load the jQuery and JavaScript files since you can’t make the page functional without them. Put these code snippets right before the closing </body> tag.
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
After the modifications shown above, this is how your HTML file should look like:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
</body>
</html>
Customizing Your Design
With the preparation out of the way, we can start getting to the core of this Bootstrap tutorial. You can now start adding the “widgets” on the “Hello, World!” HTML page you just made.
There are tons of assets you can make use of to build your page, but for starters, I’ll show you how to add a few of most common elements such as a navigation bar, background image, custom CSS, color overlay, a call-to-action button, and a page title.
1. Navigation Bar
In most cases, a navigation bar is placed on the top of your site containing several links to other key pages.
It’s one of the assets that Bootstrap does well – and makes it easy to add.
The subcomponents supported for the navigation bar are dropdown, hamburger, and a search bar.
Take the code below and put it right below the <body> tag.
<nav class="navbar navbar-expand-md"> <a class="navbar-brand" href="#">NavBar</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 dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Categories </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Food</a> <a class="dropdown-item" href="#">Games</a> <a class="dropdown-item" href="#">News</a> <a class="dropdown-item" href="#">Sport</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Item1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item2</a> </li> </ul> </div> </nav>
“Whoa, whoa. Hold your horses! What does all this code mean?” If this is your reaction upon seeing the example above, it’s completely understandable. Let me break down each part to make it easier to understand:
- .navbar-brand – this is for adding your brand or project name. You can also place a logo here using a custom styling (more on that later.)
- .navbar-nav – this part is responsible for setting the margin of the menu placeholder. You can also modify the name of each menu item and its link here.
- .navbar-toggler – you can choose how you would want your menu to collapse, either dropdown or hamburger (choose “dropdown” for a dropdown and “collapse” for hamburger)
- .form-inline – it’s where you set up actions on an in-line form such as a search bar.
- .navbar-text – you can insert in-line text here while also adjusting the vertical alignment.
After the code is in place, save the file and open it with a browser. This is what it’ll look like.
And, if you want to use an image to replace the word “Navbar” above, you can do so by replacing the code below:
<a class="navbar-brand" href="#">Navbar</a>
with this one:
<a class="navbar-brand" href="#"> <img src="/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""> </a>
Just make sure to change the value inside the src attribute to the actual path of the logo that you want to use. Let’s proceed to the next section of this Bootstrap tutorial.
2. Background Image and Custom CSS
Not going to lie, the current state of the HTML page we created for this Bootsrap tutorial is still far from perfect. It could use some custom styling to become a bit more lively and colorful – including adding a background image.
Thanks to Bootstrap, you don’t have to dive into a sea of CSS code to do that. You can create a new CSS script to affect the looks of your page.
First, in your text editor, create a new file and set the file format to CSS. Let’s name it main.css. Place it in the same folder as your HTML file.
Then, add a line of code to the head section of your HTML file (between <head> and </head>) to call the custom CSS script.
<link rel="stylesheet" type="text/css" href="main.css">
The purpose of custom CSS is to change the color of the navigation bar and the alignment of the menu items as well as the search bar.
In the main.css, insert the code below.
.body {
padding: 0;
margin: 0;
.navbar {
background:#4287f5;
}
.nav-link,
.navbar-brand {
color: #ffffff;
cursor: pointer;
}
.nav-link {
margin-right: 1em !important;
}
.nav-link:hover {
color: #000000;
}
.navbar-collapse {
justify-content: flex-end;
}
After that, save the file, and you will see the navigation changes color.
The color is now blue, and the alignment makes its layout more presentable than before. Still, it has a long way to go before its launch-ready. Let’s do something about the background.
You need to insert a header first by making another custom script similar to before – only this time you’re creating a custom JavaScript.
So, open your text editor and create a new file. Name it main.js and save it. Enter the code below.
$(document).ready(function(){
$('.header').height($(window).height());
})
Next, same as with custom CSS file, you need to load the script by adding a single line of code. Put the following code before the closing </body> tag in the index.html file.
<script type="text/javascript" src="js/main.js"></script>
Once again, make sure the path is correct based on the path to the custom JavaScript file (main.js).
If you’re done, let’s insert the code that adds the image on your header to main.css.
.header{
background-image: url('background-image.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
}
Now that you have established everything that’s “under the hood”, it’s time to put the header container on your HTML file. On index.html, insert this following code under the code for the navigation bar (right after the closing tag </nav>).
<header class="header"> </header>
Refresh the page, and if you’ve been following this tutorial correctly, there will be a background image now.
It’s starting to look good, eh?
Let’s keep making customizations to polish the page even more.
3. Color Overlay
We’re going to need either a bright or dark color overlay because as in every other landing page, there will be text on top like the page title, description, and a call-to-action button.
So, to maximize the visibility of the text, let’s tune out the background a bit. In this case, I’ll choose white because my text color is dark.
Remember the <header> tag you added to the HTML file earlier? Put the code snippet below between the opening and closing header tag.
<div class="overlay"></div>
That’s the div class, that’s used for adding an overlay. To make it clearer, the whole header section will look like this now.
<header class="header"> <div class="overlay"></div> </header>
You’re done with the HTML file for now. Next, add the code below to the main.css file.
.overlay{
position: bottom;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background: rgba(244, 244, 244, 0.79);
}
Once you’re done, save the files and refresh the page. It will have a tuned-out background now.
Alright, now it looks ready to display some text and buttons. Let’s move on to the next section.
4. Page Title, Description, and Call-To-Action Button
Just a little bit more and this Bootstrap tutorial will be complete. Since we’ll be adding a title, description, and Call-to-Action, we’ll be working with all three at the same time, as they’re very similar.
Nothing too hard – we’re just going to add a few more lines of code in the index.html and main.css files, similar to when you were adding a color overlay.
So, let’s start with the HTML file first. Earlier, you added div for the overlay inside the header.
Now, insert a div container inside the overlay section.
<div class="container">
It will make the whole header section to look like this.
<header class="header"> <div class="overlay"> <div class="container"> </div> </div> </header>
The div container, true to its name, is the one that holds the content that you want to display on your header.
Below is the code that adds a page title as a heading – <h1>, a description – <p>, and a call-to-action button – <button class=”…”>. Insert them between <div class=”container”> and its closing tag </div>.
<div class="description "> <h1> This is a sample page of Bootstrap!</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <button class="btn btn-outline-secondary btn-lg">Click Me!</button> </div>
When you’re done setting up the HTML file, move your attention to the main.css file where you will add customization to make the three components look more appealing.
Add the following code to the custom CSS script.
.description{
position: absolute;
top: 30%;
margin: auto;
padding: 2em;
}
.description h1{
color:#4286f4 ;
}
.description p{
color:#666;
font-size: 20px;
width: 50%;
line-height: 1.5;
}
.description button{
border:1px solid #4286f4;
background:#4286f4;
color:#fff;
}
In the end, the result won’t come too far off what I did on my end, as you can see in the screenshot below:
That’s it! You just finished adding a page title, description, and a call-to-action button. The page now looks much more presentable than before. With this final point, we can wrap this Bootstrap tutorial up!
Easy, Isn’t It?
Well, It did involve going back and forth between files but thanks to Bootstrap, the process is easy and only requires a little bit of coding.
It gets harder from now on, though. The more advanced a site is, the more code you have to input, and the journey may take quite a bit longer. At least, for now, you got a grasp of how you can make a simple page using Bootstrap.
Here’s a recap of this Bootstrap tutorial:
- Prepare the necessary files such as JavaScript and CSS files. If you want to host your page locally, then you must download them. Or, you can choose to load them remotely if you prefer a CDN.
- Create a new HTML file using one of the available text editors out there and fill it in with the basic structure of a “Hello, World!” page.
- Start adding components like a navigation bar, background image, color overlay, and others by filling in their respective code on the index.html, main.css, and main.js files.
- Save all the files and take a look at your web page. A Bootstrap landing page has been made from scratch.
I hope that you’re able to learn more about Bootstrap so you can create even more complex projects. Happy learning!
Leave a Reply