What is Bootstrap?
Bootstrap is a front-end framework that is used for creating HTML, CSS, and JS web applications. Its layout is very responsive, easy and fast to use. It mostly focuses on building a mobile application with having design templates for creating UI like Dropdown, Forms, Buttons, Alerts Tab, etc.
It is used for Mobile Web development because it has responsive designs and templates which is easy to use.
Bootstrap Features :
- Open Source for use
- Compatibility with all browsers.
- Responsive designs
- Easy to use and fast.
components of Bootstrap:
- Scaffolding – It has the grid system, background, styles.
- JS Plugins – Contains JS and jQuery plugins.
- Customize – Can customize frameworks.
- CSS – Contains CSS files.
There are two types of layouts in Bootstrap.
They are:
- Fluid Layout
- Fixed Layout
Fluid Layout is useful when you need to make an app which involves the full width of the screen i.e. Fluid Layout adjusts itself according to the browser size.
Fixed layout is responsive and easy to use but just like the fluid layout, it cannot adjust itself according to the browser size. Fixed Layout should be 940 px in most cases.
Grid Classes:
The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).
The Bootstrap 4 grid system has five classes:
.col- (extra small devices - screen width less than 576px).col-sm- (small devices - screen width equal to or greater than 576px).col-md- (medium devices - screen width equal to or greater than 768px).col-lg- (large devices - screen width equal to or greater than 992px).col-xl- (xlarge devices - screen width equal to or greater than 1200px)
How can you display a code in Bootstrap?
You can display the code in two ways i.e. by using the <code>tag and by using the <pre>tag.
When will you use <code>tag and <pre>tag?
<code>tag is used to show the code inline and <pre>tag is used to show code with multiple lines.
What is a progress bar in bootstrap?
Progress bar is used with HTML tag style in HTML element using <progress> keyword. In bootstrap we used html5 <progress> with CSS classes that have special features in bootstrap, that is only made for the progress bar.
Name the contextual classes that are used with the progressive bar in bootstrap.
The contextual classes used with progressive bar are as follows.
- Progress-success
- Progress-info
- Progress-warning
- Progress-danger
In bootstrap there are seven styles which we can use with the bootstrap button.
- .btn-default.
- .btn-primary
- .btn-success
- .btn-info
- .btn-warning.
- .btn-danger.
- .btn-link.
