Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (Bootstrap 4) expand_more

Layout & Grid

Containers Responsive containers Rows Columns Auto-layout columns Responsive breakpoints Column offsets Order utilities No-gutters rows Nested grid

Content

Reboot Typography Code Images Tables Figures Lead text Blockquotes Lists Text utilities

Forms

Form controls Form groups Form row Form grid Inline forms Custom checkboxes Custom radios Custom select Custom range Validation feedback

Buttons & Utilities

Button variants Outline buttons Button sizes Block buttons Button groups Spacing utilities Display utilities Flex utilities Float utilities Position utilities

Components I

Alerts Badges Breadcrumb Cards Carousel Collapse Dropdowns Jumbotron List group Media object

Components II

Modal Navs Navbar Pagination Popovers Progress Scrollspy Spinners Toasts Tooltips

Responsive & Flexbox

Responsive images Embed utility Flex direction Justify content Align items Align self Align content Grow and shrink Auto margins Responsive display

Migration & Customization

Sass variables Theme colors Spacing scale Breakpoints map Utility generation concept Bootstrap JavaScript dependencies Popper integration jQuery dependency Bootstrap 3 to 4 migration Bootstrap 4 to 5 migration

Bootstrap 4 / Components I

Cards

Learn Cards in Bootstrap 4 with a focused explanation, a topic-specific example, edge guidance, and a mastery check.

12 min read • Intermediate

bootstrap-4-044.html

html

<div class="card"><div class="card-body"><h5 class="card-title">Invoice</h5><p class="card-text">Paid</p></div></div>

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Cards Mastery Check →