bootstrap_slidesfor bootstrapthingyise.pdf

bootstrap bootstrap

2. ▪Overview on Bootstrap
▪Example (styling a form and a table)

3. ▪A CSS framework or library is a set of stylesheets with built-in classes and CSS
rules ready for use by developers and designers.
https://www.tekkiwebsolutions.com/wp-
content/uploads/Top-CSS-Frameworks.jpg

4. ▪Most powerful and most popular CSS library (large
community for learning and support)
▪Free and open-source
▪Useful for building fast responsive web pages
▪Consistent
▪Customizable
▪It comes as a component in the ASP.NET Core
framework

6. •Bootstrap grid system uses rows and columns. In
total, we always have 12 columns in a row.

7. •Bootstrap grid system uses rows and columns. In
total, we always have 12 columns in a row.

8. •Bootstrap grid system uses rows and columns. In
total, we always have 12 columns in a row.
Output:

9. •Containers are the most basic layout element in Bootstrap. They are used
to contain, pad, and align your content within a given device or viewport.
The default .containerclass is a
responsive, fixed-width container,
meaning its max-width changes at
each breakpoint.
Explore:
-Test out the responsiveness of the different types of containers
in Bootstrap here
-visit the link and increase and decrease the page width and
observe how the containers react

10. •Bootstrap provides a lot of ways to style a navbar, keeping it responsive
and neat-looking.
•a navbar may contain text, links, branding icon, a search bar, dropdown
menu.
•There are two color schemes for a navbar:
•.navbar-light for use with light backgrounds
•.navbar-dark for use with dark backgrounds
Read more on Bootstrap Navbars

11. •The margin and padding spacing utilities are used
to control how elements and components are
spaced from the outside and inside elements.
•The classes are named using the format
{property}{sides}-{size}
Docs: Bootstrap Padding and Margin utility classes

12. •Font utility classes:
•Allows you to change font sizes on a scale from 1 to 6
•Allows you to change other font properties (weight,
italic, bold)

14. Explore more on these Bootstrap components:
•Tables
•Forms
•Alerts
•Cards
•Modals

16. Resources
▪W3Schools Tutorial on Bootstrap 5
▪Bootstrap 5 documentation
▪Getting Started with Bootstrap 5 for Beginners
▪1-hr Bootstrap 5 Crash Course by Web Dev Simplified