Hello World in Bootstrap

Learn how to print "Hello World!" in Bootstrap.

We'll cover the following

Using the Bootstrap framework is really easy. So let’s take a look at some different ways to do that.

Ways to incorporate Bootstrap

There are many ways we can set up Bootstrap in our HTML document. Before moving on, we have to include the following <meta> tags in our HTML file. These are not specific to Bootstrap. They’re necessary for building good web pages in general.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
  • The first tag instructs the browser to use UTF-8 character encoding.
  • The second tag enables us to create responsive websites.

Bootstrap CDN links

Adding <meta> tags doesn’t enable Bootstrap functionalities. Bootstrap contains CSS and JavaScript files, which we use in our HTML file in the form of classes and components. But where do we get these files from? This is where content delivery networks come into play.

A content delivery network (CDN) refers to a geographically distributed group of servers that work together to provide fast delivery of internet content. Bootstrap provides us with its CSS and JavaScript files using CDN links.

Let’s run the code below and check the output.

  • HTML
html
Commented Bootstrap
Now, let’s uncomment line 6 and line 17 in the code above and click “Run” again to see the output.


  • HTML
html
Hello World! in output
In the output above, if we uncomment the comments, we’ll see a blue button with “Welcome to Bootstrap” instead of a plain HTML button. So, how does this happen? We import Bootstrap CSS and JavaScript files. The <link> present in the <head> tag imports CSS, and the <script> tag imports the JavaScript code.


Here, we didn’t require any JavaScript functionality, but some components do require it. We have learned how to apply Bootstrap files in our HTML document using CDN links, but what if someone wants to work without the internet? We can’t access the files using the CDN links anymore.


Download Bootstrap


As we now know, Bootstrap contains CSS and JavaScript files to implement components. An alternate way to use Bootstrap is to download the files and extract the zip file from
https://getbootstrap.com/docs/5.1/getting-started/download/.


Press +  to interact
File structure
File structure
Using the file structure above, we import the CSS and JavaScript files.


<link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.min.css">



<script src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>



There are many files present in the downloaded folder. The bootstrap.min.css and bootstrap.css folders contain all the necessary files to implement all Bootstrap features.
The bootstrap.min.css folder is smaller than the bootstrap.css folder, even though they contain the same content. The only difference is that bootstrap.min.css is arranged in a condensed manner to occupy fewer lines.