Grid System
.container
Fixed width container
.container-fluid
Full width container
.row
Row wrapper for columns
.col
Equal width columns
.col-1 to .col-12
Specific column width
.col-sm-*
Small breakpoint (≥576px)
.col-md-*
Medium breakpoint (≥768px)
.col-lg-*
Large breakpoint (≥992px)
.col-xl-*
Extra large (≥1200px)
.g-0 to .g-5
Grid spacing (gutters)
Typography
h1 to h6
Heading elements
.display-1 to .display-6
Display headings
.lead
Make paragraph stand out
.text-start
Left aligned text
.text-center
Center aligned text
.text-end
Right aligned text
.text-decoration-none
Remove underline
.fw-bold
Bold font weight
.fst-italic
Italic font style
.text-lowercase
Lowercase text
Colors
.text-primary
#007bff
.text-success
#28a745
.text-danger
#dc3545
.text-warning
#ffc107
.text-info
#17a2b8
.bg-*
Background colors
Spacing
Margin Format
m-{side}-{size}
Example: .mt-3 (margin-top: 1rem)
.m-0 to .m-5
All sides margin
.mt-* / .mb-*
Top/Bottom margin
.ms-* / .me-*
Start/End margin
.mx-*
Horizontal margin
.my-*
Vertical margin
.p-0 to .p-5
All sides padding
.pt-* / .pb-*
Top/Bottom padding
Flexbox
.d-flex
Display flex
.flex-row
Row direction
.flex-column
Column direction
.justify-content-start
Align to start
.justify-content-center
Center horizontally
.justify-content-end
Align to end
.justify-content-between
Space between
.align-items-start
Align to top
.align-items-center
Center vertically
Buttons
Button Examples
.btn
Base button class
.btn-primary
Primary button
.btn-secondary
Secondary button
.btn-success
Success button
.btn-danger
Danger button
.btn-lg / .btn-sm
Button sizes
.btn-outline-*
Outline buttons
Cards
Card Example
Card Header
Card content goes here
Card Footer
.card
Card container
.card-body
Card content area
.card-title
Card title
.card-text
Card text
.card-header
Card header
.card-footer
Card footer
.card-img-top
Top image
Alerts
Alert Examples
Info! This is an info alert.
Success! This is a success alert.
Danger! This is a danger alert.
.alert
Base alert class
.alert-primary
Primary alert
.alert-success
Success alert
.alert-danger
Danger alert
.alert-warning
Warning alert
.alert-dismissible
Dismissible alert
Forms
.form-control
Input field styling
.form-label
Label styling
.form-select
Select dropdown
.form-check
Checkbox/radio wrapper
.form-check-input
Checkbox/radio input
.form-check-label
Checkbox/radio label
.form-floating
Floating labels
.input-group
Input groups
.is-valid / .is-invalid
Validation states
Navigation
.navbar
Navigation bar
.navbar-brand
Brand/logo
.navbar-nav
Nav list
.nav-item
Nav item
.nav-link
Nav link
.breadcrumb
Breadcrumb navigation
.pagination
Pagination
.nav-tabs
Tab navigation
.nav-pills
Pill navigation
Utilities
.d-none
Hide element
.d-block
Display as block
.d-inline
Display as inline
.position-static
Static positioning
.position-relative
Relative positioning
.position-absolute
Absolute positioning
.position-fixed
Fixed positioning
.border
Add border
.rounded
Add border radius
.shadow
Add shadow
Breakpoints
Responsive Breakpoints
xs: 0px (default)
sm: 576px
md: 768px
lg: 992px
xl: 1200px
xxl: 1400px
.d-sm-none
Hide on small and up
.d-md-block
Block on medium and up
.d-lg-flex
Flex on large and up
.visible / .invisible
Visibility utilities
What is CodeSikhoWithAJ?
CodeSikhoWithAJ is a coding education platform dedicated to teaching programming skills to everyone who wants to learn. Our mission is to make coding accessible and help people start their journey in the tech industry.
Founded by Ajeet Yadav, CodeSikhoWithAJ provides comprehensive tutorials, practical examples, and hands-on projects to help you master web development and other programming skills.
Trusted by developers at:
Google
Microsoft
Facebook
Amazon
Netflix
Twitter