Scribd
Upload
8 views

BOOTSTRAP

Bootstrap is a widely-used framework for developing responsive web applications, offering a collection of reusable HTML, CSS, and JavaScript code snippets. It provides advantages such as time-saving, consistency across browsers, and ease of use, making it suitable for both desktop and mobile applications. The document also outlines Bootstrap's grid system, components, and class names, along with comparisons to other frameworks like Foundation.

Uploaded by

williamblake1407
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

BOOTSTRAP

Bootstrap is a widely-used framework for developing responsive web applications, offering a collection of reusable HTML, CSS, and JavaScript code snippets. It provides advantages such as time-saving, consistency across browsers, and ease of use, making it suitable for both desktop and mobile applications. The document also outlines Bootstrap's grid system, components, and class names, along with comparisons to other frameworks like Foundation.

Uploaded by

williamblake1407
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

3. How to use Bootstrap code snippets?

Bootstrap To use the Code Snippets provided by Bootstrap, we


1. Explain what is Bootstrap and its importance? need to add a piece of code within the HTML head
Bootstrap is a large collection of predefined reusable element. We call it Bootstrap CDN.
Code Snippets written in HTML, CSS, and Javascript. <!DOCTYPE html>
The Code Snippets include <html>
Buttons, Cards, Carousels, etc. <head>
• It is created by Twitter <link
• It is currently used by companies like Twitter, rel="stylesheet"
LinkedIn, Spotify, Udemy, etc.
• More than 20 million websites are built using href="https://stackpath.bootstrapcdn.com/bootstrap/
Bootstrap till now. 4.5.2/css/bootstrap.min.css"
Importance of Bootstrap: integrity="sha384-
• Bootstrap can be used to develop desktop and JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN
mobile applications. There is a built-in 0hoP+VmmDGMN5t9UJ0Z"
capability to resize the app automatically, crossorigin="anonymous"
making it smooth to move from a website to a
/>
mobile app.
<script
• Bootstrap includes HTML and CSS-based
design templates src="https://code.jquery.com/jquery-
for typography, forms, buttons, tables, naviga 3.5.1.slim.min.js"
tion, modals, image carousels, etc. integrity="sha384-
• The user interface is easy to use and built DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBn
using Bootstrap. E+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
2. What are the advantages of Bootstrap? ></script>
Some of the advantages of Bootstrap are: <script
• Time Saving: Bootstrap provides predefined
reusable code snippets which makes us not src="https://cdn.jsdelivr.net/npm/[email protected]/d
build everything from scratch. ist/umd/popper.min.js"
• Consistency: Bootstrap provides consistent integrity="sha384-
output across all the browsers. It also solves 9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhb
inconsistencies between designers and GU+6BZp6G7niu735Sk7lN"
developers. crossorigin="anonymous"
• Customizable: Bootstrap themes and ></script>
templates can be customized as per our <script
project requirement.
• Cross-browser Compatible: Bootstrap is src="https://stackpath.bootstrapcdn.com/bootstrap/4
compatible with all the latest versions of .5.2/js/bootstrap.min.js"
browsers.
integrity="sha384-
• Easy to Use: Bootstrap is very simple to use. B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofv
The setup process doesn't take too long and is L8/KUEfYiJOMMV+rV"
relatively easy, even for beginners.
crossorigin="anonymous"
></script>
</head>
<body>

1
<button class="btn btn-primary">Get 7. What does the Bootstrap package include?
Started</button> The Bootstrap package includes,
<button class="btn btn-secondary">Get Scaffolding: Bootstrap provides a basic structure with
Started</button> Grid System, link styles, and background.
</body> CSS: Bootstrap comes with the feature of global CSS
</html> settings, fundamental HTML elements style and an
HTML advanced grid system.

Collapse Components: Bootstrap contains a lot of reusable


components to provide iconography, dropdowns,
navigation, alerts, pop-overs, and much more.
4. Name some of the Bootstrap class names?
JavaScript Plugins: Bootstrap also contains a lot of
Some of the Bootstrap class names are: custom JavaScript plugins. We can easily include them
• btn all, or one by one.
• btn-primary Customize: Bootstrap components are customizable
• row and we can customize Bootstrap's components to get
our own style.
• container
• text-center
8. What are the differences between Bootstrap and
• text-danger Foundation?
..... many more Some of the differences between Bootstrap and
Foundation are:
5. Who Developed The Bootstrap?
The Bootstrap is developed by Mark Otto and Jacob
Bootstrap Foundation
Thornton at Twitter.

6. Why Bootstrap is preferred for website Bootstrap offers


In Foundation UI
development? an unlimited
element options are
number of UI
• Bootstrap has better features as compared to very limited.
elements.
other web development platforms.
• It provides predefined reusable code snippets
that enable the web developer to create a Bootstrap uses Foundation uses
new website quickly. No need to do code from pixels. REMs.
scratch.
• It provides extensive browser support for Foundation is not
almost every known browser such as Opera, Bootstrap is easy great for beginners
Chrome, Firefox, Safari, etc. to use compared to
• It supports mobile applications with the help Bootstrap
of responsive design and can adjust CSS as per
the device, screen size, etc.
• It has a Massive Support Community that
helps web developers when an issue occurs.
• Bootstrap provides JavaScript plugins that add
more interaction to the website.

2
9. What are the differences between different
Uses Uses Uses
bootstrap versions?
better Cards No
Some of the differences between Bootstrap 5, Cards instead of Cards
Bootstrap 4, and Bootstrap 3 are: wells and
Bootstrap 5 Bootstrap 4 Bootstrap 3 panels

Has Has Both


separate separate Portrait 10. What are the different button styles in Bootstrap
Portrait Portrait and 4?
and and Landsca Some of the button styles in Bootstrap 4 are:
Landscape Landscape pe
Button Styles Class names
mode on mode on mode
Smartpho Smartpho looks
nes. nes. identica Buttons with btn-primary, btn-
l. different colors secondary, etc

Container Container Contain Outline buttons btn-outline-primary,


size is Size is er Size with different btn-outline-
1320px 1140px is colors secondary, etc.
1170px

Buttons with
Has six Has five Has different sizes btn-sm, btn-lg
class class four (Small, large)
names names class
prefixes prefixes names
(col-xxl, (col-xl, prefixes Block-level
btn-block
col-xl, col- col-lg-, (col-lg-, buttons
lg-, col- col-md-, col-md-
md- , col- col-sm-, , col-
sm-, col-) col-) sm-, 11. Design two HTML buttons, success and danger,
col-xs-) using Bootstrap class names.
<button class="btn btn-success">Get
Uses CSS Uses CSS Uses Started</button>
Flexbox, Flexbox CSS <button class="btn btn-danger">Get Started</button>
CSS Float
functions and
12. How to add an HTML button and style it using
and Clear
Bootstrap to the existing HTML document?
variables
• Add the HTML button element in the
HTML body element.
Has only Has only Has
responsiv responsiv non • Include the Bootstrap CDN in the
e layout e layout respons HTML head element.
ive • Add the Bootstrap button class names to the
layout HTML button element.
option <button class="btn btn-success">Get
Started</button>

3
13. What are the types of lists supported by • It uses a 12 column system for the layouting.
Bootstrap? We can create up to twelve columns across
Bootstrap supports all three types of lists, ordered the page.
(ol), unordered(ul) and description(dl) lists. o Container : The purpose of a
container is to hold rows and
columns.
14. What is a Carousel?
o Row : The purpose of a row is to wrap
The Carousel is a slideshow for cycling through
all the columns.
images, text, etc. Slides will change for every few
seconds. o Column : We should place the
columns inside a row and the content
We can add the different images in the Carousel by
inside a column.
changing the image URL in the value of the HTML
▪ We can specify the number of
src attribute.
columns our content should
Bootstrap carousels support previous/next controls occupy in any device. The
and indicators, etc. number of columns we
specify should be a number in
15. Which of the following is not the Bootstrap the range of 1 to 12.
background class name? ▪ The Bootstrap class names
a. bg-info col-* indicates the number of
columns you would like to use
b. bg-primary out of the possible twelve
c. bg-danger columns per row. For
d. bg-error example, col-1, col-5, etc.
Answer: Option D - bg-error
19. Can a 14 or 16 column grid system be made?
16. What are Contextual classes of table in Bootstrap? Bootstrap supports the customization of Bootstrap
grid class names.
• .active: Applies the hover color to a particular
row or cell. The number of grid columns can be modified by Sass
variables. Sass variables are similar to the JS variables
• .success: Indicates a successful or positive
where we used to store the information.
action.
• $grid-columns is used to generate the widths
• .warning: Identifies a warning that might need
(in percent) of each column
attention.
• $grid-gutter-width sets the padding between
• .danger: Indicates a dangerous or potentially
the columns.
negative action.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
17. How do you use Bootstrap to make a page
responsive?
We can make a page responsive by using the 20. What is col and span in Bootstrap?
Bootstrap Grid System which helps us to create col means column in Bootstrap. Bootstrap Grid System
columns and rows to build a responsive layout of the allows up to 12 columns across the page and each
page. column is represented as a span.

18. What is the Bootstrap grid system? 21. What is a Bootstrap Container?
Bootstrap Grid System is a collection of reusable code The container is the most basic layout class name in
snippets to create responsive layouts. It is made up of Bootstrap and is required when using the Bootstrap
containers, rows, and columns. Grid System.

4
The purpose of a container is to hold rows and
Margin Bootstrap Padding Bootstrap
columns.
class names class names
Bootstrap comes with three different containers:
• .container: It is a responsive, fixed-width
container. Its max-width changes at each
breakpoint.
m-*, mt-*, mr-*, p-*, pt-*, pr-*, pb-
• .container-fluid: It is a full-width container
mb-*, ml-* *, pl-*
spanning the entire width of the viewport.
(width: 100%)
• .container-{breakpoint}: It is 100% wide until
The asterisk (*) symbols can be any number in the
the specified breakpoint. For higher
range of 0 to 5 or auto.
breakpoints, it takes the max-width.

24. What is Flexbox Utility in Bootstrap?


22. What are the Bootstrap class names for different
breakpoints? The Flexbox utilities in Bootstrap makes us quickly
manage the layout, alignment, and sizing of grid
Bootstrap Grid Columns
columns, components, etc.
Bootstrap provides different Bootstrap Grid Column
Some of the Flexbox utility class names in Bootstrap
class name prefixes for Five Responsive Tiers
are:
(Responsive Breakpoints).
• The .d-flex class name enables the flex
Class behaviours.
Device Device Size Name
Prefix Flexbox Class Names
(Width)
property

Extra small
<576px col-
devices
flex-
flex-row, flex-column, etc.
direction
Small col-
>=576px
devices sm-
justify-content-start,
Medium col- justify-content-end, justify-
>=768px justify-
devices md- content-center, justify-
content
content-between, justify-
content-around, etc.
Large
>=992px col-lg-
devices
align-items-start, align-
items-end, align-items-
Extra large align-
>=1200px col-xl- center, align-items-
devices items
baseline, align-items-
stretch, etc.
Display Utilities
Examples: d-none, d-sm-none, d-md-none, etc.
align-self-start, align-self-
end, align-self-center,
align-self
23. What are the predefined class names of margin align-self-baseline, align-
and padding in Bootstrap? self-stretch, etc.

5
25. Explain the Bootstrap class names d-none and d-
block ?

Class Description
Name

Doesn't display an HTML element


d-
and doesn't take any space in the
none
HTML document.

d-
Displays an HTML element
block

More Interview Questions

1. What is a Breadcrumb?
Breadcrumb indicates the current page's location
within a navigational hierarchy.
For example,
If the breadcrumb shows, Home / Library / Data
It means, the user is navigated to the Home page, and
then navigated from Home page to Library page, and
then Library page to Data page.
The current page is Data Page. When clicked on the
Home or Library page, the user can be navigated to
the corresponding page.

2. What are the typical screen sizes for building a


responsive web design?
The typical screen sizes for building a responsive
website are:

Device Device Size (Width)

Extra small devices <576px

Small devices >=576px

Medium devices >=768px

Large devices >=992px

Extra large devices >=1200px

You might also like