Scribd
Upload
3 views4 pages

Bootstrap Notes-6

Bootstrap is a free front-end framework developed by Twitter for faster web development, featuring responsive design capabilities. It includes various components such as containers, grids, tables, alerts, buttons, and modals, all designed to enhance user experience across devices. The framework emphasizes a mobile-first approach and provides extensive styling options for forms, images, and navigation elements.

Uploaded by

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

Bootstrap Notes-6

Bootstrap is a free front-end framework developed by Twitter for faster web development, featuring responsive design capabilities. It includes various components such as containers, grids, tables, alerts, buttons, and modals, all designed to enhance user experience across devices. The framework emphasizes a mobile-first approach and provides extensive styling options for forms, images, and navigation elements.

Uploaded by

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

1)What is Bootstrap:-->Bootstrap was initially developed at Twitter in mid-2010.

It
was publicly released as an open-source project on August 19, 2011.
The framework was created by Mark Otto and Jacob Thornton

a)Bootstrap is free front-end framework for faster easy web development


b)Bootstrap includes HTML and CSS
c)Bootstrap also gives you the ability to easily create responsive designs

2)What is responsive design:-->Responsive web design is about creating web sites


which automatically adjust themselves to look good on all devices, from small
phones to large desktops

3)Why to use bootstrap:-->


a)Easy to use:-->Anbody with just basic knowledge of html and css
b)Responsive Features:-->Bootstrap's responsive CSS adjusts to phones, tablets, and
desktops
c)Mobile First Approach:-->In Bootstrap, mobile-first styles are part of the core
framework

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>

4)Bootstrap Container's:-->
a)container:-->create responsive fixed width container
b)containe-fluid:-->create responsive containe with full width of the page
c)Container border and color

5)Bootstrap 5 Grid:-->Bootstrap's grid system is built with flexbox and allows up


to 12 columns across the page.
a)col-sm:-->screen width equal or greater than 576px(small devices)
b)col-md:-->screen width equal to or greater than 767px(medium devices)
c)col-lg:-->screen width equal to or greater than 992px(large devices)
d)col-xl:-->screen width equql to or greater than 1200px(xlarge devices)
e)col-xxl:-->screen width equal to or greater than 1400px(xxlarge devices)

6)Bootstrap Table:-->
a)table:-->add basic style to table
b)table-striped:-->add zebra stripes to table
c)table-bordered:-->add border on all sides of table and cells
d)table-hover:-->add hover effect on table rows
e)table-dark:-->add black background to table

7)Bootstrap Images:-->
a)rounded:-->add rounded corners to image
b)rounded-circle:-->to shape image to circle
c)img-thumbnail:-->shape the as thumbnail
d)Aligning Images:-->
I)float-start:-->to align image to the left
II)float-end:-->to align image to the right
III)mx-auto d-block:-->to align image to the center

8)Bootstrap 5 Alerts:-->to create predifined alert messages


alert:-->to create alert box
a)alert-success
b)alert-danger
c)alert-info
d)alert-warning
e)alert-primary
f)alert-secondary
g)alert-light
h)alert-dark

9)Bootstrap Button:-->to create different style of buttons


btn:-->create basic style for button
a)btn-success
b)btn-danger
c)btn-primary
d)btn-secondary
e)btn-warning
f)btn-info
g)btn-light
h)btn-dark

10)Bootstrap 5 Spinners:-->to create spinner/loader


spinner-border:-->to create spinner/loader layout
a)colored spinners:-->
I)text-muted
II)text-success
III)text-danger
IV)text-primary
v)text-secondary
VI)text-dark
VII)text-light

b)Growing Spinners:-->to create spinner/loader to grow instead of spin


spinner-grow:-->to create growing spinner/loader layout
I)text-muted
II)text-success
III)text-danger
IV)text-primary
v)text-secondary
VI)text-dark
VII)text-light

c)Spinner Buttons:-->add spinner to button with or without text


i)spinner-border-sm
ii)spinner-grow-sm

11)Bootstrap 5 Pagination:-->
a)Basic Pagination:-->pagination,page-item,page-link
b)Active State Pagination:--->to highlight current page(active)
c)Disabled State:-->To create un-clickable link(disabled)
d)Pagination Sizing:-->To resize pagination blocks
I)pagination-lg:-->for larger bolock
II)pagination-sm:-->for smaller block

12)Bootstrap 5 Cards:-->Bordered box


a)Basic Card:-->card,card-body
b)Card With Header & Footer:-->card-header,card-footer
c)Cards with background:-->bg-primary,bg-success,bg-danger,bg-sceondary,bg-info,bg-
dark,bg-light,text-white,text-dark
d)Cards with title,text,links:-->card-title,card-text,card-link
e)Card with image:-->card-img-top
13)Bootstrap 5 Collapse:-->show or hide large amount of contents
a)Basic Collapse:-->
b)Accordion:-->to extend the card components

14)Bootstrap 5 Navs:-->to create application's navigation


a)Basic Horizontal Nav:-->
b)Aligned Nav:-->
I)justify-content-center:-->align nav contents to center
II)justify-content-end:-->align nav contents to right
c)Vertical Nav:-->flex-column

15)Bootstrap 5 Modals:-->modal component is dialog/popup box window that is


displayed to top of current page
a)Basic Modal:-->
b)Resizing Bootstrap Modal:-->
I)modal-sm:-->small modal(max-width 300px)
II)modal-lg:-->large modal(max-width 800px)
III)modal-xl:-->extra large modal(1140px);

c)Centered Modal:-->center the modal vartically and horizontally with in the page
modal-dialog-centered

16)Bootstrap 5 Scrollspy:-->scrollspy is used to automatically update links in


navigation list based on scroll position

17)offcanvas:-->similar to modal(hidden by default,shown when activated),to show


sidebar menus
a)Responsive Offcanvas:-->
I)offcanvas-sm:-->
II)offcanvas-md:-->
III)offcanvas-lg:-->
IV)offcanvas-xl:--->
V)offcanvas-xxl:-->

18)Bootstrap Forms:-->
a)form-control:-->to get proper style for input text box
b)form-label:-->to give style for lable
c)form-check-input:--> to give style for checkbox and radio button
d)form-check-label:-->to give style for lable
e)form-select:-->to give style for dropdown list
f)form-control:-->
I)form-control-lg
II)form-control-sm
g)form-control attributes
I)disabled
II)readonly

h)color picker:-->to pick color codes


form-control-color

19)Floating Labels:-->can insert the label inside input field, and make them float
on user click inside input

a)input floating labels:-->


b)floating label for textarea
c)floating label for dropdown

20)Home Page Using Bootstrap:-->

You might also like