Flexbox Cheat Sheet - Bootstrap 4

Bootstrap 3

BootstrapCreative.com : 41

Bootstrap 3.4.0

CSS

bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X

6bXIkM++IkyinN+" crossorigin="anonymous">

script>

integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw"

crossorigin="anonymous"></script>

Typography

Code

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Transitions

Modal

Dropdown

Scrollspy

Tab

Tooltip

Popover

Alert

Button

Collapse

Carousel

Affix

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Panels

Responsive embed

Wells

CSS JavaScript Components

Bootstrap 3

Grid

Basic grid - full width is 12 columns wide

<!-- change .container to .container-fluid

to be full width -->

<!-- Columns are always 50% wide, on

mobile and desktop -->

</div>

<div class="col-xs-6">.col-xs-6

<div class="col-md-6">100% mobile

50% everywhere else</div>

<div class="col-md-6">100% mobile

50% everywhere else</div>

</div>

Media queries

/* Extra small devices (phones, less than

768px) No media query since this is the

default in Bootstrap */

/* small (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* medium (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* large (large desktops, 1200px and up)

@media (min-width: @screen-lg-min) { ... }

Text & Images

.text-left Left aligned text

.text-center Center aligned text

.text-right Right aligned text

.text-justify Justified text

.text-nowrap No wrap text

.text-lowercause Lowercase text

.text-uppercase Uppercase text

.text-capitalize Capitalized text

.lead Good for first paragraph of article

.list-unstyled Removes default list

margin/padding

.list-inline Makes list items inline

.dl-horizontal Makes list items two

columns

.img-responsive Make an image responsive

.img-rounded Adds rounded corners to

image

.img-circle Crops image to be circle

.img-thumbnail Adds rounded corner and

border to an image

.pull-left Floats item left

.pull-right Floats item right

.center-block Set an elemennt to block

with auto left and right margin

.clearfix Clear floats by adding this

class to the parent container

Blockquote

<blockquote><p>Lorem ipsum dolor</p>

<footer>Someone famous in <cite

title="Source Title">Source Title</

cite></footer></blockquote>

Headings

<h1>h1. Bootstrap heading

<small>Secondary text</small></h1>

<p class="h1">Paragraph that looks like

heading</p>

Bootstrap 3

BootstrapCreative.com : 43

Navbar

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<li class="active"><a href="#">Link <span class="sr-only">(current)</span></

a></li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"

aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

<li><a href="#">Action</a></li>

<li><a href="#">Separated link</a></li>

</ul>

</li>

</ul>

</div>

</div>

</nav>

Bootstrap 3

Forms

<form>

<label for="exampleInputEmail1">Email address</label>

<input type="email" class="form-control" id="exampleInputEmail1"

placeholder="Email">

</div>

<label for="exampleInputPassword1">Password</label>

<input type="password" class="form-control" id="exampleInputPassword1"

placeholder="Password">

</div>

<label for="exampleInputFile">File input</label>

<p class="help-block">Example block-level help text here.</p>

</div>

<label>

<input type="checkbox"> Check me out

</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

Buttons

.btn Needs to be added to all buttons because it adds padding and margin

.btn-default The default button style

.btn-primary The button that has the primary action in a group

.btn-success Could be used on the last submit button in a form

.btn-info Informational button

.btn-link Removes background color and add text color

.btn-(lg,sm, xs) Large buttom, smaller than default button, even smaller

.btn-block Button that spans full width of parent

Example

Bootstrap 3

BootstrapCreative.com : 45

Carousel

</ol>

...

</div>

...

</div>

...

</div>

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-

slide="prev">

<span class="sr-only">Previous</span>

</a>

<a class="right carousel-control" href="#carousel-example-generic" role="button"

data-slide="next">

</a>

</div>

Bootstrap 3

Jumbotron

<h1>Hello, world!</h1>

<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

</div>

To make the jumbotron full width, and without rounded corners, place it outside all

.containers and instead add a .container within.

...

</div>

Page header

<h1>Example page header <small>Subtext for header</small></h1>

</div>

Breadcrumbs

<li><a href="#">Library</a></li>

</ol>

Responsive embed

</div>

Bootstrap 3

BootstrapCreative.com : 47

Tables

<tr>

</tr>

</table>

</div>

Bootstrap 3

Alphabetical Index of CSS Classes

.active

.affix

.alert

.alert-danger

.alert-dismissible

.alert-info

.alert-link

.alert-success

.alert-warning

.arrow

.badge

.bg-danger

.bg-info

.bg-primary

.bg-success

.bg-warning

.bottom

.breadcrumb

.btn

.btn-block

.btn-danger

.btn-default

.btn-group

.btn-group-justified

.btn-group-vertical

.btn-info

.btn-link

.btn-primary

.btn-sm

.btn-success

.btn-toolbar

.btn-warning

.btn-xs

.caption

.caret

.carousel

.carousel-caption

.carousel-control

.carousel-indicators

.carousel-inner

.center-block

.checkbox

.checkbox-inline

.close

.col-lg-* /*(1-12)*/

.col-lg-offset-* /*(0-12)*/

.col-lg-pull-* /*(0-12)*/

.col-lg-push-* /*(0-12)*/

.col-md-* /*(1-12)*/

.col-md-offset-* /*(0-12)*/

.col-md-pull-* /*(0-12)*/

.col-md-push-* /*(0-12)*/

.col-sm-* /*(1-12)*/

.col-sm-offset-* /*(0-12)*/

.col-sm-pull-* /*(0-12)*/

.col-sm-push-* /*(0-12)*/

.col-xs-* /*(1-12)*/

.col-xs-offset-* /*(0-12)*/

.col-xs-pull-* /*(0-12)*/

.col-xs-push-* /*(0-12)*/

.collapse

.collapsing

.container

.container-fluid

.control-label

.divider

.dropdown

.dropdown-backdrop

Bootstrap 3

BootstrapCreative.com : 49

.dropdown-header

.dropdown-menu

.dropdown-menu-left

.dropdown-menu-right

.dropdown-toggle

.embed-responsive

.embed-responsive-16by9

.embed-responsive-4by3

.fade

.form-control

.form-control-feedback

.form-control-static

.form-group

.glyphicon

.glyphicon-chevron-left

.glyphicon-chevron-right

.h1

.h2

.h3

.h4

.h5

.h6

.has-feedback

.help-block

.hidden

.hidden-lg

.hidden-md

.hidden-print

.hidden-sm

.hidden-xs

.hide

.icon-bar

.icon-next

.icon-prev

.img-circle

.img-rounded

.img-thumbnail

.in

.initialism

.input-group

.input-group-addon

.input-group-btn

.input-lg

.input-sm

.invisible

.item

.jumbotron

.label

.label-danger

.label-default

.label-info

.label-primary

.label-success

.label-warning

.lead

.left

.list-group

.list-group-item

.list-group-item-danger

.list-group-item-heading

.list-group-item-info

.list-group-item-success

.list-group-item-text

.list-group-item-warning

.list-inline

.list-unstyled

.mark

.media

.media-body

.media-heading

.media-list

.media-object

Bootstrap 3

.modal

.modal-backdrop

.modal-body

.modal-content

.modal-dialog

.modal-footer

.modal-header

.modal-lg

.modal-open

.modal-scrollbar-measure

.modal-sm

.modal-title

.nav

.nav-divider

.nav-justified

.nav-tabs

.nav-tabs-justified

.navbar

.navbar-brand

.navbar-btn

.navbar-collapse

.navbar-default

.navbar-fixed-bottom

.navbar-fixed-top

.navbar-form

.navbar-header

.navbar-inverse

.navbar-left

.navbar-link

.navbar-nav

.navbar-right

.navbar-static-top

.navbar-text

.navbar-toggle

.next

.page-header

.pager

.pagination

.panel

.panel-body

.panel-danger

.panel-default

.panel-footer

.panel-group

.panel-heading

.panel-info

.panel-primary

.panel-success

.panel-title

.panel-warning

.popover

.popover-content

.popover-title

.pre-scrollable

.prev

.progress

.progress-bar

.progress-bar-danger

.progress-bar-info

.progress-bar-striped

.progress-bar-success

.progress-bar-warning

.pull-left

.pull-right

.right

.row

.row-no-gutters

.show

.small

.sr-only

.tab-pane

.table

Bootstrap 3

BootstrapCreative.com : 51

.table-bordered

.table-responsive

.text-capitalize

.text-center

.text-danger

.text-hide

.text-info

.text-justify

.text-left

.text-lowercase

.text-muted

.text-nowrap

.text-primary

.text-right

.text-success

.text-uppercase

.text-warning

.thumbnail

.tooltip

.tooltip-arrow

.tooltip-inner

.top

.visible-lg

.visible-lg-block

.visible-lg-inline

.visible-lg-inline-block

.visible-md

.visible-md-block

.visible-md-inline

.visible-md-inline-block

.visible-print

.visible-print-block

.visible-print-inline

.visible-print-inline-block

.visible-sm

.visible-sm-block

.visible-sm-inline

.visible-sm-inline-block

.visible-xs

.visible-xs-block

.visible-xs-inline

.visible-xs-inline-block

.well

.well-lg

.well-sm

BootstrapCreative.com : 52

Resources

BootstrapCreative.com : 53

Design Inspiration

• Bootstrap Expo

https://expo.getbootstrap.com/

• Built With Bootstrap

http://builtwithbootstrap.com/

• Wrap Bootstrap

https://wrapbootstrap.com/

• Ocial Bootstrap Themes

https://themes.getbootstrap.com/

• AWWWARDS

https://www.awwwards.com/websites/

responsive-design/

• Media Queries

https://mediaqueri.es/

• Pattern Tap

http://zurb.com/patterntap

• CodePen Pattern Library

http://codepen.io/patterns/

• Building Blocks

http://foundation.zurb.com/building-

blocks/

HTML Reference

• Mozilla HTML Reference

https://developer.mozilla.org/en-US/

docs/Web/HTML

• HTMLReference.io

https://htmlreference.io/

CSS Reference

• Mozilla CSS Reference

https://developer.mozilla.org/en-US/

docs/Web/CSS/Reference

• CSS-Tricks Almanac

https://css-tricks.com/almanac/

• Can I Use?

https://caniuse.com/

• CSSreference.io

https://cssreference.io/

JavaScript Reference

• Mozilla JavaScript Reference

https://developer.mozilla.org/en-US/

docs/Web/JavaScript/Reference

• jQuery Documentation

https://api.jquery.com/

Bootstrap Reference

• Bootstrap 4 Classes Reference

https://bootstrapcreative.com/resourc-

es/bootstrap-4-css-classes-index/

• Bootstrap 3 Classes Reference

https://bootstrapcreative.com/resourc-

es/bootstrap-3-css-classes-index/

• Ocial Bootstrap Documentation

http://getbootstrap.com/

• Bootsnip - Bootstrap Code Snippets

https://bootsnipp.com/

Resources

Want to improve the design of

your website or web application?

Learning HTML and CSS is a lot

more challenging than it used to be.

Responsive web design adds more

layers of complexity to design and

develop websites. In this book, you will

become familiar with the new cards

component, using the new flexbox

grid layout, customizing the look and

feel, how to follow the mobile-first

development workflow, and more!

Get a Free Book Sample

BootstrapQuickStart.com