Bootstrap-CSS Basics

Click ★ if you like the project. Your contributions are heartily ♡ welcome.

Q. What is Bootstrap?

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.

Q. Why to choose Bootstrap for building the websites?

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.

Q. What are the key components of Bootstrap?

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

Q. What are class loaders in Bootstrap?

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.

Q. What are the types of layout available in Bootstrap?

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

Q. What is Bootstrap Grid System?

For creating page layout through a series of rows and columns that house your content Bootstrap Grid Sytem is used.

Q. What are offset columns in Bootstrap?

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

Q. What is column ordering in Bootstrap?

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.

Q. What function you can use to wrap a page content?

To wrap a page content you can use .container and using that you can also center the content.

Q. What pagination in bootstrap is and how they are classified?

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

Q. What is the use of Jumbotron in Bootstrap?

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

Q. What is the difference between Bootstrap and Foundation?

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

Q. In Bootstrap what are the two ways you can display the code?

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

Q. What are the steps for creating basic or vertical forms?

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

Q. What is Modal plugin used for in Bootstrap?

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.

Q. What is Bootstrap Container?

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.

Q. What is Bootstrap collapsing elements?

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’)

Q. What is list group in Bootstrap and what is the use of it?

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.

Q. How you can add badge to list group in Bootstrap?

To add badge to list group in Bootstrap you have to simply add span class = "badge" within the li element.

Q. What media object in Bootstrap is and what are their types?

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

Q. What is Bootstrap well?

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.

Q. How you can create Nav elements in Bootstrap?

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

Q. What is the use of Bootstrap Carousel plugin?

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')

Q. Define 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.

Q. Why Bootstrap is used for Mobile Web Development?

It is used for Mobile Web development because it has responsive designs and templates which is easy to use.

Q. Explain the features of Bootstrap?

Its Features include:

Open Source for use Compatibility with all browsers. Responsive designs Easy to use and fast.

Q. Define the key components of Bootstrap?

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.

Q. What do you understand by Bootstrap container?

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.

Q. What do you mean by Bootstrap Classloader?

Bootstrap class loader is a part of java and a main parental class of class loader.

Q. How many types of layouts are there in Bootstrap?

There are two types of layouts in Bootstrap.

They are:

• Fluid Layout
• Fixed Layout

Q. Define Fluid 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.

Q. Define Fixed Layout.

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.

Q. How can you display a code in Bootstrap?

You can display the code in two ways i.e. by using the codetag and by using the pre tag.

Q. When will you use codetag and pretag?

code tag is used to show the code inline and pre tag is used to show code with multiple lines.

Q. 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.

Q. 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

Q. What are responsive utility classes in Bootstrap?

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

Q. What are the different button styles in Bootstrap?

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.

Q. What are Bootstrap alerts?

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.

Q. Define Bootstrap thumbnails?

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.

Q. Explain Modal plugin in Bootstrap?

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.

Q. Which class is used for pagination in Bootstrap?

To add pagination on the webpage we have to use the class .pagination.

Q. What is Bootstrap collapsing elements?

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.

Q. What is Bootstrap Well?

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.

Q. Explain the uses of carousel plugin in Bootstrap?

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').

Q. What will be the output of the below code and why?

<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.

Q. How can we customize links of pagination in Bootstrap?

We can customize the links by using .disabled for unclickable links and .active for indicating the current page.

Q. Explain input group in Bootstrap?

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.

Q. Write the ways to create a tabbed navigation menu in Bootstrap?

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.

Q. In Bootstrap, how can you create a pills navigation menu?

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.

Q. How navbar works in Bootstrap?

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.

Q. How we can create a navbar in Bootstrap?

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.

Q. What is Bootstrap breadcrumb?

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.

Q. What are labels in Bootstrap?

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.

Q. What are badges in Bootstrap?

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.

Q. What is a jumbotron in Bootstrap?

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.

Q. How can we make image responsive in Bootstrap?

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.

Q. What do you mean by normalize in Bootstrap?

Bootstrap normalize is a small CSS file which is used to make cross-browser consistency.

Q. What is lead body copy in Bootstrap?

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.

Q. What are panels in Bootstrap?

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.

Q. How will you create a Bootstrap panel with heading?

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.

Q. What is a scrollspy plugin in Bootstrap?

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.

Q. What is the work of affix plugin in Bootstrap?

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.

Q. What is grid system in Bootstrap?

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.

Q. What are Grid classes in the Bootstrap?

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).

Q. What are global styles that are used in Bootstrap Default Typography?

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.

Q. What will be the output of the below code?

<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.

Q. What dependencies does Bootstrap require to work properly?

jQuery is the only dependency that bootstrap requires for working properly and this is only for JavaScript plugins in bootstrap.

Q. What the below code will do?

<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.

Q. What are the two codes that are used for code display in Bootstrap?

The codes are code tag and pre tag.

Q. What are Glyphicons in Bootstrap?

By this, we can use the icon simply anywhere in your code.

<span class="glyphicon glyphicon-search"></span>

Q. What is a transition plugin in Bootstrap?

It provides simple transition effects like sliding or fading in modals.

Q. Explain the concept of creating a vertical or basic form in Bootstrap?

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.

Q. Explain the Bootstrap framework structure?

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.

Q. What are Breadcrumbs in bootstrap?

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;
}

Q. Why do we use Jumbotron in Bootstrap?

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>

Q. Explain types of lists supported by Bootstrap?

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.

Q. Navigation bar in Bootstrap?

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>

Q. Would you tell me something about Glyphicons and how are they written in our code?

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>

Q. Describe a Bootstrap panel Bootstrap well and Bootstrap carousel?

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.

Q. New features of Bootstrap 4

Q. Types of Layouts in Bootstrap?

Q. What is the role of Jumbotron in Bootstrap?

Q. How to align a flex item on the baseline in Bootstrap?

Q. Differentiate between Bootstrap and Foundation

Q. What is an Alert component in Bootstrap?

Q. What is a Tooltip component in Bootstrap?

Q. Striped Progress Bar in Bootstrap

Q. Why the align-self-sm-stretch class used in Bootstrap 4?

Q. Form Control states in Bootstrap

Q. Why do we need a static Control in Bootstrap

Q. Why should we use Button Groups in Bootstrap?

Q. Horizontal Form in Bootstrap

Q. What is a Bootstrap Navbar?

Q. How to add inline subheadings in Bootstrap

Q. How to wrap flex items on different screens in Bootstrap?

Q. How to make a link unclickable in Bootstrap Navbar?

Q. What is a Bootstrap Container?

Q. Bootstrap Collapse example?

Q. Why the .flex-sm-shrink-1 class used in Bootstrap 4?

Q. Why Bootstrap has a Grid System?

Q. Why the flex-md-row-reverse class used in Bootstrap 4?

Q. How to display flex items vertically on small screen in Bootstrap 4?

Q. Why the align-items-sm-baseline class used in Bootstrap 4?

Q. Can Tabs be centered in Bootstrap?

Q. Grid Structure in Bootstrap

Q. Why Offset Columns introduced in Bootstrap

Q. Column Ordering in Bootstrap?

Q. Define Bootstrap Panels

Q. What is a Bootstrap Well?

Q. Create Inline form in Bootstrap

Q. How we can use Glyphicons in Bootstrap?

Q. Pagination in Bootstrap?

Q. Container-fluid vs Container in Bootstrap

Q. What is a card in Bootstrap?

Q. Why the d-sm-flex class used in Bootstrap 4?

Q. What does a default navbar consist of?

Q. What are Carets in Bootstrap?

Q. Align components in Bootstrap

Q. How can I add footer to panel in Bootstrap

Q. Center an element in Bootstrap

Q. How do we add outline to Buttons in Bootstrap?

Q. How to create a responsive navbar in Bootstrap?

Q. How to create striped table with Bootstrap?

Q. How to create Navbar in Bootstrap?