abraj/bootstrap-play

Play around with Bootstrap

bootstrap-play

Introduction

Setup

• https://getbootstrap.com
• Components requiring JavaScript: https://getbootstrap.com/docs/4.1/getting-started/introduction/#starter-template
• Responsive breakpoints: https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints

Starter page

• Demo link
• Starter template: https://getbootstrap.com/docs/4.1/getting-started/introduction/#starter-template

Layout and Typography

Grid system

• Demo link
• Containers: container, container-fluid (https://getbootstrap.com/docs/4.1/layout/overview/#containers)
• Grid system: https://getbootstrap.com/docs/4.1/layout/grid/
• Five grid breakpoints: extra small (xs), small (sm), medium (md), large (lg), and extra large (xl)

Typography

• Display headings: display-{1,2,3,4} (https://getbootstrap.com/docs/4.1/content/typography/#display-headings)
• Lead: (https://getbootstrap.com/docs/4.1/content/typography/#lead)
• Blockquotes: blockquote, blockquote-footer (https://getbootstrap.com/docs/4.1/content/typography/#naming-a-source)
• Lists: list-unstyled, list-inline (https://getbootstrap.com/docs/4.1/content/typography/#lists)
• Truncate text with ellipsis: text-truncate
• Responsive typography: Bootstrap doesn’t do this for you. (https://getbootstrap.com/docs/4.1/content/typography/#responsive-typography)

Images

• Demo link
• Images: https://getbootstrap.com/docs/4.1/content/images/
• Figures: https://getbootstrap.com/docs/4.1/content/figures/
• Media: media > media-body (https://getbootstrap.com/docs/4.1/layout/media-object/)

Tables

• Demo link
• https://getbootstrap.com/docs/4.1/content/tables/

Components

Alerts

• Demo link
• https://getbootstrap.com/docs/4.1/components/alerts/

Badges

• Demo link
• https://getbootstrap.com/docs/4.1/components/badge/

Breadcrumb

• Demo link
• https://getbootstrap.com/docs/4.1/components/breadcrumb/

Buttons

• Demo link
• https://getbootstrap.com/docs/4.1/components/buttons/

Button group

• Demo link
• https://getbootstrap.com/docs/4.1/components/button-group/

Cards

• Demo link
• https://getbootstrap.com/docs/4.1/components/card/

Carousel

• Demo link
• https://getbootstrap.com/docs/4.1/components/carousel/

Collapse

• Demo link
• https://getbootstrap.com/docs/4.1/components/collapse/

Dropdowns

• Demo link
• https://getbootstrap.com/docs/4.1/components/dropdowns/

Forms

• Demo link
• https://getbootstrap.com/docs/4.1/components/forms/

Input group

• Demo link
• https://getbootstrap.com/docs/4.1/components/input-group/

Jumbotron

• Demo link
• https://getbootstrap.com/docs/4.1/components/jumbotron/

List group

• Demo link
• https://getbootstrap.com/docs/4.1/components/list-group/

Modal

• Demo link
• https://getbootstrap.com/docs/4.1/components/modal/

Navs

• Demo link
• https://getbootstrap.com/docs/4.1/components/navs/

Navbar

• Demo link
• https://getbootstrap.com/docs/4.1/components/navbar/

Pagination

• Demo link
• https://getbootstrap.com/docs/4.1/components/pagination/

Popovers

• Demo link
• https://getbootstrap.com/docs/4.1/components/popovers/

Progress

• Demo link
• https://getbootstrap.com/docs/4.1/components/progress/

Scrollspy

• Demo link
• https://getbootstrap.com/docs/4.1/components/scrollspy/

Tooltips

• Demo link
• https://getbootstrap.com/docs/4.1/components/tooltips/

Utilities

Borders

• Docs: https://getbootstrap.com/docs/4.1/utilities/

Margin utilities: mr-{1,2,3}, mr-{}-{1,2,3}, mt ....
Spacing utility classes: mb-4

float-left, float-right
mx-auto d-block
text-center
flex-column

align-self-{start,center,end}
align-items-{start,center,end}