This article introduces you to the Bootstrap language. Bootstrap is a framework language of HTML, CSS, javascript, and jQuery.
It is developed by Twitter (Social Networking Site) and used to make responsive websites. When we use the bootstrap framework, we need to write less code of CSS to design the website.
We use Jquery (Java-Script framework) to shorten the lines of script code instead of Java-script. Similarly, Bootstrap is used to design a website that fits all screen devices instead of directly writing CSS properties and their values.
Websites that are made by using Bootstrap-framework, are automatically responsive. The media query of CSS (Cascading Style Sheet) applies automatically with the help of its CDN when you use predefined classes. Then, surely CDN or downloaded files must be linked in the head section of the page.
Bootstrap is widely used to design the user interface of a website. It makes it easy when it comes to developing responsive webpages (for different-different screen sizes of devices).
For example, If I want to add some padding in p (paragraph) element then I will use class="p-2" means 8px padding. You are going to know more about it in next articles. For now, just take a look on example.
<body>
<p class="p-2">This paragraph have 8px padding.</p>
</body>There are two versions of Bootstrap framework:
- Bootstrap Version_3
- Bootstrap Version_4
Because of some bugs in its previous version like not being responsive to some devices, the latest version was launched with better coding quality and functionality.
It is a famous language because there is no need of using the maximum core coding of media queries (for responsive purpose) of CSS to make it fit with all sizes of devices.
Bootstrap gives us predefined features to create animations, menus (nav-bar), scroll-bar designing, slider, popover, progress-bar, buttons, carousel, form designing, tooltip, card, modal, alert box, tabs, pagination, etc.
The code written in bootstrap words is fully fresh from the perspective of search engines.
Predefined attributes are used for actions. Ex.- popover, etc.
Install Bootstrap CDN in A Webpage
- To get bootstrap CDN visit to the official website of Bootstrap:- Official Website
- Find Bootstrap CDN there. You need four files:- CSS, JS, Popper JS, and Jquery CDN.
- Copy all of them into the head section of the webpage and get started bootstrap first coding.
Or you can directly copy Bootstrap 4.0 CDN from here~
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>Only Jquery CDN-
Make sure, you are connected to the internet when running your code at least for the first time.
Download Bootstrap's Required Files and install
- Click here and download source files.
- Extract downloaded zip file and find these four files one by one –
- Bootstrap.css, (design elements)
- Bootstrap.js,
- jquery-1.9.1.min (JS-file)
- and, Popper.min (js file).
- Copy these files and paste them into your project's head section. That's all.
The benefit of linking downloaded bootstrap files in your project, is you do not need to be connected to the internet while practicing with Bootstrap.
Now bootstrap has been successfully installed. Its time to get started coding with bootstrap. We will use predefined classes and their structure to code in it.
Note*** When you AJAX request then, use the default Jquery CDN instead of the Bootstrap minified version.
Publish A Comment