How to Use Bootstrap With HTML

First, let’s understand what Bootstrap is. Bootstrap is HTML, CSS, and JavaScript framework to create mobile-first, responsive websites. So, it is a framework that contains HTML and CSS-based design templates. It uses the HTML and CSS markup for content and styles and has custom jQuery plugins to give behavior to the site.

A responsive website is a site that adapts itself to be compatible with devices of any screen size. The website design should be such that it gives a good user experience, be it on a smartphone or a large desktop.

How to Use Bootstrap with HTML?

To begin with Bootstrap, first, you need to have Bootstrap installed on your computer. you can download Bootstrap from getbootstrap.com or include Bootstrap via CDN if you don’t want to download Bootstrap locally.

If you have downloaded Bootstrap locally on your computer, the following would be the file structure.

If you have downloaded the precompiled Bootstrap,

If you have downloaded the Bootstrap source code,

In the CSS and JS files of Bootstrap, we have a bootstrap.css, bootstrap.min.css, bootstrap.js and bootstrap.min.js files. The min.css and min.js files are the same as .css and .js files but they have been minified in order to reduce the size of the file by removing the white spaces and returns. These files are not readable by humans. The purpose is to reduce the file size and improve the loading time of the webpage.

Next, what you need is a text editor. Any text editor would do. But I recommend Atom or Sublime. Both are great text editors and are free.

Also Read: Also Read: Things to know about bootstrap admin templates

To start, open a file in the text editor and save the file with the filename and the extension .html. This is where you will write the content of your website. If you intend to add custom CSS to your web page then create a file and save it with the extension .css.

Write the basic structure of HTML markup. This should look like this.

In between the <head> and </head> tags is where you would write the <meta> tags and the <link> tags. The content of the website is written within the <body> tags.

Now, include the Bootstrap CSS and JS file in the HTML to be able to use Bootstrap. Include the link bootstrap.min.css file in the <head>. When adding your custom CSS file make sure that you add it after adding bootstrap.min.css. in order to override the bootstrap styles.

Also Read: 25 Inspiring Bootstrap Based Website Examples

Include the JavaScript files using <script> tag right before the </body> tag. The reason for this is to help load the visible part of the page faster. If the JavaScript files had been written before the browser will render the JavaScript first and then the next files. So if a user is loading the website it would seem like the website is taking much more loading time.

Before starting with building a simple template with Bootstrap, I recommend that you go through the documentation of Bootstrap on the official website and familiarize yourself with the components, flexbox, grid system etc.

So let’s start with creating a simple page using Bootstrap. The example page here consists of some of the commonly used Bootstrap components like Jumbotron, buttons, and a modal.

The above code produces the result as in the following.

Bootstrap 4 sample template

Upon clicking the modal button.

Bootstrap 4 modal

So, there we have our simple web page using Bootstrap. We have not used any custom CSS for styling, only the Bootstrap 4 classes. With HTML and Bootstrap, we can easily create the front end of a fully functional website, but a little bit of CSS of our own can make your website look more beautiful and attractive.

BootstrapDash believes in providing the best, efficient and quality free and premium bootstrap admin dashboard template to get your web application up and running easily and quickly. Visit our website to get to know more about our products. Want to create a stunning website of your own? Start learning