Have you likely heard of Bootstrap? What do you know about that. According to the official website, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.
This guide is meant as a first look into Bootstrap for beginners, so won’t be going into LESS and Sass integration, which are more intermediate/advanced concepts. While it’s written for the current, stable version Bootstrap 4, the concepts will remain the same for future versions.
Before starting, it’s important for you to understand HTML and CSS first, at least fundamentally.
Is the framework important?
You absolutely don’t need to use a framework to build a website design. But, the framework is to help you to build a responsive web design easily and quickly. Frameworks are very popular and have many benefits, so it’s important to learn how to work with them.
Some of the ways that frameworks can help you:
- Prevent repetition between projects
- Utilize responsive design to allow your website to adapt to various screen sizes.
- Add consistency to design and code.
- Quickly and easily prototype new designs
- Ensure cross-browser compatibility
Generally, every web project you work on will need to be responsive and work properly on all the major browsers, and likely have some fallbacks for older browsers. Bootstrap has a huge open source community that works on covering this so you don’t have to. Additionally, when multiple developers all know the same system, they can work in better harmony – and it also makes it easier for newcomers on a project to get up to speed.
Introduction
To use bootstrap you need at least these 3 main file below!
- bootstrap.css – a CSS framework.
- bootstrap.js – a javascript/jquery framework.
- jquery.js – javascript library.
- popper.js – plugins (optional).
What is jQuery? jQuery is an extremely popular and widely used JavaScript library, that both simplifies and adds cross-browser compatibility to JavaScript. Bootstrap was built with jquery, so we need that jquery to run bootstrap function.
The grid is probably one of the most essential aspects of the framework. It’s the basis on which the entire layout is created. Generally, the bootstrap has 4 different sizes for each device type, xs for mobile, sm for tablet/mobile on landscape mode, lg for laptop/tablet on landscape mode, and xl for desktop. The calculation is that each full screen has a total of 12 columns. See the image below.
Okay let’s begin!
Building basic template
Firstly, create some directory as we need, like css, and js folder. Download the latest version of bootstrap here. Put bootstrap.css to the CSS folder and bootstrap.js to the js folder. Don’t forget to download jQuery here and choose version 3.5.1 and put it to the js folder. It looks like:
For alternatively you can use bootstrap CDN.
<link rel="stylesheet"> href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script> src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>Further, we need to create a index.html. I recomended to use HTML5 boilerplate template, because this template is standar for every responsive website. Or view simple example to start from, see code below:
<!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="css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Bootstrap JS -->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>Well done, we have made a simple hello world template with bootsrap. Now, let’s check out our awesome new site.
See what we work with bootstrap. About free templates that’s build with bootstrap. See Our projects