This presentation introduces Bootstrap, an open-source CSS framework for building responsive mobile-first websites. It discusses key Bootstrap components like icons, containers, grids, and cards. Bootstrap provides over 1600 high-quality icons that can be used as embedded elements, through a sprite, or as external images. Containers are used to pad and align content. The grid system uses a 12-column layout for building designs of all sizes. Cards are flexible content containers that can include titles, images, lists, and more.

1. Presentation
on
Bootstrap
Things aren’t always #000000 and #FFFFFF

2. Tasnima Hamid
Presented By
ID: 1901043, Internet of Things Program, Department of ICT
Bangabandhu Sheikh Mujibur Rahman Digital University, Bangladesh

3. Bootstrap
Powerful, extensible, and feature-packed frontend toolkit.
Mobile-first front-end web development.
Free and open-source CSS framework.

4. Table of Contents
Enhances usability
Bootstrap Icons
Bootstrap Container
Pads the content
Bootstrap Grid Systems
Used for Responsive Layout
Bootstrap Cards
Highlighting Content in
Container
01
02
03
04

5. Bootstrap Icons
01

6. Glimpse
Number
Current Version Formats
Over 1,600 High
Quality Icons
1.8.3 Available in SVGs,
SVG sprite or Web
Fonts format

7. Installation
npm ZIP
CDN

8. ICONS USAGE
EMBEDDED
Can be embedded
within the HTML page
SPRITE
Can be applied by/used as
current-colored icons
EXTERNAL IMAGE
SVGs can be used as
normal image
ICON FONT
Can be used via CSS
01
03 04
02

9. Embedded
● Adding the name of the icon class to any inline HTML element

10. SVG Sprite
● Using the SVG icon through the <use> element
● Icon’s filename is used as fragment identifier

11. External Image
● Copying the Bootstrap Icons SVGs to the directory of choice

12. Bootstrap Container
02

13. Container
Fundamental Building
Block
Pads the Content
Contains the content Aligns the content

14. .container
.container-fluid
.container-{breakpoints}
Working Method

15. ● Responsive
● Fixed-width Container
● Max-width changes at each
breakpoint
Default Container

16. Fluid Container
● Full width container
● Spans the entire width of the
viewport

17. Responsive Container
● 100% width until the specified
breakpoint is reached

18. Container Breakpoints

19. Bootstrap Grid System
03

20. Built with Flexbox
12 Column System Build Layout of All
Shapes and Sizes
Bootstrap Grid System
Six Default
Responsive Tiers
Uses Series of
Containers, Rows and
Columns
Layouts and Aligns
Content

21. ● Six responsive breakpoints
● Containers center and horizontally pad content
● Rows are wrappers for columns
● Columns are flexible
● Responsive and customizable gutters.
● https://codepen.io/thamid02/pen/MWVwYPZ
GRID SYSTEM
Container
(Violet area)
Row
(Bisque area)
Column
(Sky blue area)

22. Grid Breakpoints

23. Auto-layout Columns
● Equal-width column
● Setting one column width
● Variable width column
● https://codepen.io/thamid02/pen/eYMNNMJ

24. Responsive Classes
● All breakpoints
● Stacked to horizontal
● Mix and match
● Row columns

25. Nesting

26. Bootstrap Cards
04

27. Bootstrap Cards
Flexible and extensible content
container
Built with flexbox
Offers easy alignment
Mix well with other Bootstrap
components
Have no Margin by default

28. Card Content Type
● Body
● Titles, text, links
● Images
● List groups
● Kitchen sink
● Header and footer

29. Card Sizing
● Grid markup
● Utilities
● Custom CSS

30. Card Text Alignment

31. Card Images

32. Card Images
Turn an image into a card
background and overlay card’s text.
Images at the top or
bottom of a card
Image Caps Image Overlays

33. Horizontal Card

34. Card Navigation

35. Card Styles
● Background and color
● Border
● Mixins utilities

36. Card Layout
● Card groups
● Grid Cards
● Masonry

37. Thank you
“There are three responses to a piece of design — yes, no, and
WOW! Wow is the one to aim for.”
“A designer knows he has achieved perfection not when there is
nothing left to add, but when there is nothing left to take away.”