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

menu_book Course Curriculum (Bootstrap 3) expand_more

Grid System

Container and container-fluid Rows and columns Twelve-column grid xs grid classes sm grid classes md grid classes lg grid classes Column offsets Column ordering push and pull Nested grids

Typography & Content

Headings Lead text Inline text elements Text alignment classes Text transformation classes Blockquotes Lists Description lists Code and pre elements Responsive images

Tables & Forms

Basic table Striped table Bordered table Hover table Condensed table Form groups Horizontal forms Inline forms Input groups Form validation states

Buttons & Images

Button styles Button sizes Block buttons Active button state Disabled button state Button groups Button toolbars Rounded images Circle images Thumbnail images

Core Components

Glyphicons Dropdown menus Button dropdowns Input group addons Nav tabs Nav pills Navbar Breadcrumbs Pagination Labels and badges

Panels & Media

Jumbotron Page header Thumbnails component Alerts Progress bars Media object List groups Panels Wells Responsive embeds

JavaScript Plugins

Modal plugin Dropdown plugin ScrollSpy plugin Tab plugin Tooltip plugin Popover plugin Alert plugin Button plugin Collapse plugin Carousel plugin

Utilities & Migration

Clearfix Center-block Pull-left and pull-right Show and hidden classes Responsive visibility utilities Print utilities Caret utility Close icon Screen-reader-only text Bootstrap 3 to 4 migration notes

Bootstrap 3 / Panels & Media

Media object

Learn Media object in Bootstrap 3 with a focused explanation, a topic-specific example, edge guidance, and a mastery check.

12 min read • Intermediate

bootstrap-3-056.html

html

<div class="media"><img src="avatar.jpg" alt="Ava"><div class="media-body">Build completed.</div></div>

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Media object Mastery Check →