Tutorials Tonight's Logo

BOOTSTRAP 4 GETTING STARTED


Before getting started with Bootstrap first understand what actually bootstrap delivers us and how to use them.

Bootstrap provides us with CSS and Javascript based design templates which you can use in your front-end projects.

It prevents you from writing much of CSS and at the same time building modern and responsive websites using it.

You can use these design templates by adding certain CSS classes to the specific HTML tags. Some of the bootstrap features need javascript to run but most need not.


How To Setup Bootstrap In HTML?

Bootstrap can be easily added to your HTML projects, you can add bootstrap in HTML files in 2 different ways:

  1. By using Bootstrap CDN (Content Delivery Network)
  2. By downloading bootstrap compiled files

1. Using Bootstrap 4 CDN

It is very easy to setup bootstrap in HTML using CDN provide by bootstrap.

Add the following <link> in <head> seaction of your HTML document before all other stylesheets to load CSS part of bootstrap.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">

Now set up JS for bootstrap.

Many of bootstrap components require the use of javascript to function. They require jQuery, Popper.js and javascript file provided by bootstrap.

Add the following <script> just before the end of <body>.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>

Hello World In Bootstrap

Bootstrap 4 Getting Started Template

Check the complete code for hello world program bootstrap 4.

<!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://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"><\/script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"><\/script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"><\/script>
  </body>
</html>
▶ Run the code


What is CDN?
CDN stands for Content Delivery Network. It refers to geographically distributed data centres and servers that ensure to deliver data faster.

2. Using bootstrap by downloading files

You can add bootstrap to your HTML project by downloading compiled CSS and Javascript provided by Bootstrap.

To download compiled and ready to use bootstrap 4 files visit the official site of bootstrap 4.

bootstrap 4 zipped download file
A downloaded zipped file of bootstrap 4

The downloaded compiled bootstrap file is a zip file. Unzip (extract) the file and you get 2 folders JS and CSS.

bootstrap 4 unzipped file
Unzipping give you 2 folders

Now open CSS folder and you get various files with extension .css and .map. For now only look at the file with .css extension.

Now you have bootstrap.css and bootstrap.min.css file in the folder. Add either of these two files in your HTML file in head section using the link tag. Leave the rest files as it is. ( bootstrap.min.css is recommended because it is minified therefore has less size ).

bootstrap 4 CSS files
bootstrap 4 CSS files

Similarly in the JS folder find bootstrap.min.js file and add it to your HTML file (minified file is recommended to add).

bootstrap 4 js files
bootstrap 4 js files

You will also have to add jquery and Popper.js externally for some of the bootstrap components to work properly. Now your bootstrap is set up.

Here is an example of starting template after downloading bootstrap.

<!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="./bootstrap/bootstrap.min.css">

  <title>Hello, world!</title>
</head>

<body>
  <h1>Hello, world!</h1>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"><\/script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"><\/script>
  <script src="./bootstrap/bootstrap.min.js><\/script>
</body>

</html>

Bootstrap Globals

Before using bootstrap you need to be aware of some important global style and settings used by bootstrap.

These styles and settings are for normalization of cross browser style.

HTML5 doctype

Bootstrap uses HTML and requires the use of the HTML5 doctype. Always include HTML5 doctype at the begning of page without it, you will see some incomplete style.

Also add lang attribute and the correct character set.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

Responsive Meta Tag

Bootstrap is developed as a mobile-first approach, it optimizes code for mobile devices first and then scales it up to larger devices using a media query. To ensure proper rendering of the Bootstrap component add the following meta tag in <head> tag.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

The width=device-width part of the above meta tag sets the width of the webpage to follow the screen width of the device.

The initial-scale=1 part sets the initial zoom level when the page is first loaded.

The shrink-to-fit=no override the behaviour caused by width=device-width to cause the page to scale down to fit the content that overflows the viewport bounds.

Bootstrap CDN vs Local

It is suggested to use CDN because your visitors may already have visited some websites that contain Bootstrap.

In that case, their browser has already downloaded Bootstrap's CSS and JS from the same CDN. The files are stored in the cache memory and when visitors visit your website then it directly loads it from cache memory makes the website faster.

Bootstrap Containers

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.