Click ★ if you like the project. Your contributions are heartily ♡ welcome.
Bootstrap is a HTML, CSS, and JS framework for building the rich web applications with minimal effort. This framework emphasis more on building mobile web applications.
There are few reason why we choose Bootstrap for building websites
Mobile Support: For mobile devices it provides full support in one single file rather than in separate file. It supports the responsive design including adjusting the CSS based on the different types of device, size of the screen etc. It reduces extra effort for developers. Easy to learn: Writing application in bootstrap is easy if you know CSS and HTML Browser Support: It supports all the popular browsers like Firefox, Opera, Safari, IE etc.
The key components of Bootstrap are
CSS : It comes with plenty of CSS files Scaffolding : It provides a basic structure with Grid system , link styles and background Layout Components : List of layout components JavaScript Plugins: It contains many jQuery and JavaScript plugins Customize: To get your own version of framework you can customize your components
Class loader is a part of JRE (Java Runtime Environment) which loads Java classes into Java virtual environment. Class loaders also does the process of converting a named class into its equivalent binary form.
In Bootstrap there are two types of Layout available
Fluid Layout: Fluid layout is used when you want to create a app that is 100% wide and use up all the width of the screen Fixed Layout: For a standard screen you will use fixed layout (940 px) option BootStrap
For creating page layout through a series of rows and columns that house your content Bootstrap Grid Sytem is used.
For more specialized layouts offsets are a useful feature. For more spacing they can be used by pushing column over.
For example, .col-xs=* classes do not support offset but they are easily replicated using an empty cell
Column ordering is one of the feature available in bootstrap and you can easily write columns in an order and show them in another one. With .col-md-push-* and .col-md-pull-*
the order of the column can be easily changed.
To wrap a page content you can use .container and using that you can also center the content.
Pagination is the handling of an unordered list by bootstrap. To handle pagination bootstrap provides following classes
.pagination: To get pagination on your page you have to add this class .disabled, .active: Customize links by .disabled for unclickable links and .active to indicate the current page .pagination-Ig, .pagination-sm: Use these classes to get different size item
In bootstrap, Jumbotron is generally used for content that you want to highlight like some slogan or marketing headline etc. in other words it is used to enlarge the size of the headings and to add a margin for landing page content
To use the Jumbotron in Bootstrap
Create a container div with the class of .jumbotron
| Bootstrap | Foundation |
|---|---|
| Bootstrap offers unlimited number of UI elements | In Foundation UI element options are very limited in numbers |
| Bootstraps uses pixels | Foundation use REMs |
| Bootstrap encourages to design for both desktop and mobile. | Foundation encourages to design mobile first |
| Bootstrap support LESS as its preprocessor | Foundation support Sass and Compass as its preprocessor |
In bootstrap you can display code in two ways
tag : If you are going to display code inline, you should use code tag
pre tag: If you want to display the code as a standalone block element or it has multiple lines then you should use pre tag
The steps for creating basic or vertical forms are
Add a role form to the parent form element
Wrap labels and controls in a div with class .form-group. To achieve optimum spacing this is needed
Add a class of .form-control to all texturl input , textarea , and select elements
A modal is a child window that is layered over its parent window. Using a custom Jquery Plugin, Bootstrap Modal are created. To enrich user experience and to add functionality to users, modal windows are created with the help of Modal plugin.
Bootstrap container is a class which is useful and creates a centred area within the page where our site content can be put within. The advantage of the bootstrap .container is that it is responsive and will place all our other HTML code.
Bootstrap collapsing elements enables you to collapse any particular element without writing any JavaScript code or the accordion markup. In Bootstrap to apply collapsing elements you have to add data-toggle= “collapse" to the controller element along with a data-target or href to automatically assign control of a collapsible element. Likewise, you can use .collapse (options), .collapse (‘show’) or .collapse (‘hide’)
List groups are components to display both simple and complex element with custom content
For example, a simple list group is created using class .list-group to address the list, and class .list-group-item to address individual item.
To add badge to list group in Bootstrap you have to simply add span class = "badge" within the li element.
Media objects in Bootstrap enables to put media object like image, video or audio to the left or right of the content blocks. Media element can be created using the class .media and the source is specified in using the class .media-object. Media-objects are of two types,
They are of two types
.media .media-list
Bootstrap well is a container div that makes the content to appear sunken or an inset effect on the page. In order to create a well, wrap the content that you would like to appear in the well with a div containing the class of .well.
Bootstrap offers various options for styling navigation elements all of them use the same markup and base class .nav.
To create Tabular Navigation or Tabs
Start with a basic unordered list with the base class of .nav Then add class .nav-tabs
The Carousel plugin is used to add a slider to your site. It is useful in condition where you want to display huge amount of contents within a small space on the web pages. Some of the standard carousel includes
.carousel (options).carousel ('cycle').carousel ('pause').carousel ('number').carousel ('prev').carousel ('next')
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.
Its Features include:
Open Source for use Compatibility with all browsers. Responsive designs Easy to use and fast.
Its components include:
Scaffolding – It has the grid system, background, styles. JS Plugins – Contains JS and jQuery plugins. Customize – Can customize frameworks. CSS – Contains CSS files.
Bootstrap container behaves like a container where you can put HTML code and it is a part within the page where the content of the site can be placed to make it responsive and fast.
Bootstrap class loader is a part of java and a main parental class of class loader.
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.
You can display the code in two ways i.e. by using the codetag and by using the pre tag.
code tag is used to show the code inline and pre tag is used to show code with multiple lines.
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.
The contextual classes used with progressive bar are as follows.
Progress-successProgress-infoProgress-warningProgress-danger
Responsive utility classes in bootstrap are a set of classes which are used to conceal or exhibit the HTML elements based on screen resolution that discerns by media query in bootstrap.
Example: hidden-md-down, It hides
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.
This is used to create presume alert messages, which adds style to the messages to look more noticeable to the user.
There are four classes in alerts i.e .alert-success, .alert-info, .alert-warning, .alert-danger.
It is a way to use the layout images, videos, text etc. in a grid system. We can create thumbnails by adding a tag with the class .thumbnails around the image.
This will add four pixels of padding and a grey border.
A model is an inherited window that is layered over its parent window. This is used to augment the user experience and adds different functionalities to the users.
Model windows are created with the help of the modal plugin.
To add pagination on the webpage we have to use the class .pagination.
It allows you to collapse any particular element without using any JavaScript code.
To use this feature in bootstrap you have to add data-toggle=" collapse" to the controller element along with a data target to automatically assign the control of a collapsible element. We can use this by writing .collapse(options) etc.
Bootstrap well is a form of container which thrives or makes the content to look recessed on the web page. It also wraps the content by using .well class.
Carousel plugin in bootstrap is used to make sliders in the web pages or your site. There are several carousel plugins that are used in bootstrap to display large contents within a small space by adding sliders.
Example: .carousel(options), .carousel('pause'), .carousel('cycle'), .carousel('prev'), .carousel('next').
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 65%">
<span class="sr-only">75% successfully completed</span>
</div>
<div class="progress-bar progress-bar-warning" style="width: 20%">
<span class="sr-only">30% completed with warnings</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 15%">
<span class="sr-only">15% did not complete</span>
</div>
</div>If we place multiple bars with the same .progress parent element, Bootstrap will pile them into one single progress bar. As we know, in bootstrap the sum of the progress bar is 100 %. So, the progress bar will give the result as full width and fully populated.
We can customize the links by using .disabled for unclickable links and .active for indicating the current page.
Input group in bootstrap are put out from controls. By using an input group, we can easily add prepended and appended text or button to the text-based inputs.
We can prepend and append elements to a .form-control by taking all the elements in a div under a class .input-group. After that, place your extra content inside a span in same div by using class .input-group-addon after this you can place the span element either before or after the input element.
We can create a tabbed navigation by making a basic unordered list with the base class of .nav and after this, we can add class .nav-tabs.
Pills navigation menu in bootstrap is created by making an unordered list at first with the base class of .nav and after this add the class .nav-pills.
In bootstrap, navbar is an eminent feature to make responsive meta component that works as navigation headers for your application and site. In mobile view, navbar collapses and become horizontal as the available viewport width increases.
To create a navbar in a bootstrap at first, we have to add the classes .navbar, .navbar-default to the nav tag. After this, we have to add the role="navigation" to the above element, and this will help in accessibility.
We have added a header class .nav-header to the div element, which will include an a element with a class navbar brand. From this, we will get a text with a larger size.
Bootstrap breadcrumb is an efficient way to show hierarchy-based information for a site. This can show the dates of publishing,categories or tags in a blog. They also tell the user about the current page location within a navigational hierarchy.
So we can say that Bootstrap breadcrumb is simply an unordered list with a class of .breadcrumb.
Bootstrap labels are used for offering counts, tips or other things to provide markup on web pages. To use the label in Bootstrap we use the class .labels to indicate the labels.
Badges are homogeneous to labels, the main difference between them is corners are more rounded. The main work of badges in the bootstrap is to highlight new or unread items. To use badges just add span class="badge" to links and bootstrap navs.
It is used to increase the size of headings and to add a lot of margins for landing page content. To create a jumbotron we have to create a container div with the class of .jumbotron.
After the updates in Bootstrap, currently the feature to make an image responsive has been added, we can do this by adding a class .img-responsive to the img tag. This class makes the width max-width =100%; and height=auto; to the image so that it matches nicely to the parent element.
Bootstrap normalize is a small CSS file which is used to make cross-browser consistency.
It is used to add some ascent to the paragraph if we add class="lead". This will enlarge the font size and a taller line height.
Panels are components that are used when you want to put your DOM component in a box. So, to retrieve a basic panel we just need to add class.panel to the div element. We can also add class.panel-default to this element.
There are two ways by which we can add panel heading.
First is, we can directly use .panel-heading class to add heading container in a panel and the second way is by using any heading tag like h1 to h6 with a .panel-title class to give more styles on the heading.
It is an auto-updating nav plugin which allows in fetching section of the page based on the scroll position. This can be done by the .active class to the navbar based scroll position.
This plugin allows a div to be attached to a location on the page.
Use of the social icon in a page is an example for this in which we see that the icons will start in a location, but when the page hits on a certain mark it will block the div in place and will stop the scrolling for rest of the page.
By using the grid system, we can make up to 12 columns across a page. There are different classes which have been defined for this for the UI purpose.
There are four grid classes in Bootstrap.
They are:
- xs (It is used for phone screens less than 786px wide).
- sm (It is used for the tablet screens which are greater than 786px wide).
- md (It is for small laptop screen of size equal to or greater than 992px wide).
- LG ( It is for laptop and desktop screens which are equal to greater than 1200px wide).
In Bootstrap the global default font-size is 14px and the line height is 1.428. The default font changes to Helvetica and Arial are with sans-serif fallback and all these styles are applicable for both body and all paragraphs.
<div class="row">
<div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
</div>The output of this will give the grids for extra small devices as we can see in the snippet col-xs-12 that has been used and it will also give the grids for desktop devices and above as the class col-md-3 has been used.
jQuery is the only dependency that bootstrap requires for working properly and this is only for JavaScript plugins in bootstrap.
<a href="#">Home <span class="badge">36</span></a>This code will produce a link with an inline badge which will give an important notification to the user like number received, message received or the number of requests etc.
The codes are code tag and pre tag.
By this, we can use the icon simply anywhere in your code.
<span class="glyphicon glyphicon-search"></span>It provides simple transition effects like sliding or fading in modals.
For this first we have to add a role form to the parent form element then we have to wrap labels and controls in a div with class.form-group and then we have to add a class of .form-control to all text url input,textarea and select elements.
Bootstrap is a responsive front-end mobile development framework. Sites can be effectively created with the grid system of the Bootstrap framework. its holds a highly responsive design and very much customizable, Mobile sites can be built on top of the Bootstrap framework using below programming entities,
HTML5 markup CSS Styling Javascript Fonts Here on mobile measurements content can be divided into 12 columns, then it can further be reduced to 6,4,3, etc. Ease of style and making define the Bootstrap buttons with default classes available for images as well.
Breadcrumbs depict the navigational hierarchy of a site, separators in the hierarchy are automatically added by means of CSS.
Bootstrap breadcrumb used for,
Documentation page Magazine ERP system A breadcrumb in Bootstrap is simply an unordered list with a class of .breadcrumb.
Example:
.breadcrumb > li + li:before {
color: #CCCCCC;
content: “/ “;
padding: 0 5px;
}Jumbotron is a user-attractive function of Bootstrap. it is a brilliant way to highlight the key contents of a page. the content could be a slogan or probably a headline or any other catchy element of the page. Jumbotron works by increasing the content of the landing page and also increasing the heading size of the content. In order to implement Jumbotron in a Bootstrap use:
Create a container div with the class of. Jumbotron
Example: The example shows wrapping up of heading contents inside a div class Jumbotron container.
<div class="jumbotron">
<h1>Learn to Create Websites</h1>
<p>In today's world internet is the most popular way…</p>
<p><a href="#" class="btn btn-primary btn-lg">Learn more</a></p>
</div>Lists supported by Bootstrap are as following,
Definition lists − Evey list is by default introduced with a dt and dd tag ement
dt : definition term
dd : corresponds to the defenition of dt
Ordered lists − lies in a sequential order and prefixed by numerical values.
Unordered lists − styled traditionally, does not follow any specific order. bullets can be easily customized. class, list-inline can be used to hold all list items within a single line.
Let us move to the next Bootstrap Interview Questions And Answer.
This is the advanced Bootstrap Interview Questions which is asked in an interview. It resembles the navigation header in the top of the page, the navigation bar can be created with Nav tag. Navbars and their contents are fluid by default. The horizontal width can be scaled and controlled using Navigation containers. Navbars are concealed by default while printing.
Example:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</nav>Glyphicons are symbols or definitive icon fonts which provide easy orientation in your web projects. they are preferably addended in buttons, form inputs, toolbars and navigation components. Glyphicons Halflings are not free to use entities and requires licensing. Bootstrap includes more than 250 glyphs from the Glyphicons Halflings set.
Example:
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>Bootstrap well: Adds a greyish rounded background around the content, it is a container class. The .well-sm class for small wells and .well-lg class for large wells allows alternate the size of the well. Default well size is normal.
Example:
<div class="well">Basic Well</div>Bootstrap panel: There could be situations where some site contents need to be wrapped up in a box to enhance the visibility for the user. Bootstrap panels lock hands on these needs. They can be created with the .panel class and content inside the panel has a .panel-body class.
Example:
<div class="panel panel-default">
<div class="panel-body">Look, I'm in a panel!</div>
</div>Bootstrap carousel: Adds a slider through which images, videos, and contents can be populated and sided for the users. It is a flexible, handy and responsive way to add a carousel to our site. Carousel plug-in is a component which is used for the same.