How To Use Bootstrap In HTML
Last Updated : Mar 11, 2024
IN - HTML Bootstrap | Written & Updated By - Riya
In this tutorial we will show you the solution of how to use bootstrap in HTML, there is also a feature of using bootstrap in html. Bootstrap usually helps to make us a website more fast and easy.
Bootstrap divides the page in twelve columns and the css, JavaScript and the font’s style that we use type manually to make them creative, with the help of bootstrap it become easy.
Genuinely, there are two ways or types to use bootstrap in html and are specified below.
Step By Step Guide On How To Use Bootstrap In HTML :-
As, bootstrap can be used in two ways in html. The first one is by using its cdn and the other is by downloading its file in your pc.
With both of them, bootstrap can be used and it also helps to make us a responsive website, a responsive website is that which is suitable for both mobile and desktop.
Without any changes in a file, the website also opened in both. There are many websites globally that uses bootstrap right now.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<p class="h1">
this is heading one in paragraph
</p>
<p class="h3">
this is heading three in paragraph
</p>
<p class="h5">
this is heading five in paragraph
</p>
<div class="display-1">
this is display-1 in div
</div>
<div class="display-3">
this is display-3 in div
</div>
<p class="text-primary">this is colored text with color property</p>
<p class="text-success">you can use any color with the help</p>
<p class="text-danger">of bootstrap in html </p>
<p class="text-warning">you have only to give class </p>
<p class="text-info">name in any tag where you want to </p>
<p class="text-light bg-dark">apply color, the color name be according to </p>
<p class="text-dark">the class you give to tag having text</p>
<p class="text-muted">hence color will be automatically applied</p>
<p class="text-white bg-dark">and you also can apply background color with bootstrap</p>
<p class="text-secondary">this is BOOTSTRAP, welcome here</p>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively. Here, we link online cdn link of bootstrap, you can see the result with internet only.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. In the body tag, now we create first paragraph tags, then divisions and then other paragraph tag.
- But in result you will see the font is customized without any CSS, but we give a link in head section only.
- This is due to the classes given to the tags which we want to customize. Hence, without any extra efforts and coding we create an eye catching website and this is only done with the help of CSS.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, we can say that bootstrap helps us to many an creative website without any additional CSS coding.
You can use bootstrap by any way and there are other files like JavaScript in bootstrap which helps us to add JavaScript functionality.
I hope this tutorial on how to use bootstrap in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
