Bootstrap 4 Cheat Sheet Guide

User Manual:

Open the PDF directly: View PDF PDF.
Page Count: 13

DownloadBootstrap 4 Cheat Sheet Guide
Open PDF In BrowserView PDF
Bootstrap
Breakpoints

4 Cheat Sheet

Breakpoints
Extra small < 544px
Small ≥ 544px
Medium ≥ 768px
Large ≥ 992px
Extra large ≥ 1200px

1.0:v4.0.0-alpha.6, 4/22/17 Page

1/13

Colors

.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-inverse
.bg-faded

Typography

Lists

.text-left Left aligned text

.list-unstyled Removes default list margin

.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
Blockquote



Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Integer
posuere erat a ante.



Headings

h1. Bootstrap heading Secondary
text


Paragraph that looks like
heading


.list-inline Makes list items inline
.dl-horizontal Makes list items two columns

Images
.img-fluid Make an image responsive
.img-rounded Adds rounded corners to image
.img-circle Crops image to be circle
.img-thumbnail Adds rounded corner + border

Floats
.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

Find an error? Contact me

1.0:v4.0.0-alpha.6

:1

Bootstrap
Starter Template

4 Cheat Sheet

1.0:v4.0.0-alpha.6, 4/22/17 Page

2/13













		




Hello, world!


			




Left Column


Right Column


			
		










		 
		




Find an error? Contact me

1.0:v4.0.0-alpha.6

:2

Bootstrap

4 Cheat Sheet

1.0:v4.0.0-alpha.6, 4/22/17 Page

3/13

One Column Centered Grid


		




			
		










Two Column Grid


		








		







Three Column Grid


		










		







Four Column Grid


		












		







Find an error? Contact me

1.0:v4.0.0-alpha.6

:3

Bootstrap
Navbar

4 Cheat Sheet

1.0:v4.0.0-alpha.6, 4/22/17 Page

4/13



Find an error? Contact me

1.0:v4.0.0-alpha.6

:4

Bootstrap
Modal

4 Cheat Sheet

1.0:v4.0.0-alpha.6, 4/22/17 Page

5/13






Find an error? Contact me

1.0:v4.0.0-alpha.6

:5

Bootstrap
Forms

4 Cheat Sheet

1.0:v4.0.0-alpha.6, 4/22/17 Page

6/13







We'll never share your email with
anyone else.

















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 Large buttom
.btn-sm Smaller than default button
.btn-xs Even smaller
.btn-block Button that spans full width of parent

Link


Find an error? Contact me

1.0:v4.0.0-alpha.6

:6

Bootstrap
Carousel

4 Cheat Sheet

1.0:v4.0.0-alpha.6, 4/22/17 Page

7/13



Find an error? Contact me

1.0:v4.0.0-alpha.6

:7

Bootstrap
Jumbotron

4 Cheat Sheet

1.0:v4.0.0-alpha.6, 4/22/17 Page

8/13






Fluid jumbotron


This is a modified jumbotron that occupies the entire horizontal space
of its parent.






Card


Card image cap



Card title


Some quick example text to build on the card title and make up
the bulk of the card's content.

Go somewhere





Breadcrumbs

    

  1. Home
    2. 

  2. Library
    3. 

  3. Data
    4. 



Responsive embed





Find an error? Contact me

1.0:v4.0.0-alpha.6

:8

Bootstrap
Tables

4 Cheat Sheet

1.0:v4.0.0-alpha.6, 4/22/17 Page

9/13






#
thead-default






1
Nina










#
thead-inverse






1
Nina






Find an error? Contact me

1.0:v4.0.0-alpha.6

:9

Bootstrap

4 Cheat Sheet

1.0:v4.0.0-alpha.6, 4/22/17 Page

10/13

Component CSS Format and Media Queries
/*
* Component section heading
*
* Component description and use
*/
/* base - shared styles */
.component { width: 220px; }

/* Sub-component with component name as a prefix to isolate styles and break
the cascade. */
.component-heading {
display: block;
width: 100px;
font-size: 1rem;
}
/* variant - alert color */
.component-alert {
color: #ff0000;
}
/* variant - success color */
.component-success {
color: #00ff00;
}
/* Add media queries below components instead of a separate stylesheet or
section to make updating easier */
@media (min-width: 480px) {
.component-heading { width:auto; }
}

Find an error? Contact me

1.0:v4.0.0-alpha.6

: 10

Bootstrap

4 Cheat Sheet

1.0:v4.0.0-alpha.6, 4/22/17 Page

11/13

Convert pixels to REMS
Pixels REMS

Pixels REMS

1 px 0.0625

26 1.625

2 px 0.125

27 1.6875

3 px 0.1875

28 1.75

4 px 0.25

29 1.8125

5 px 0.3125

30 1.875

6 px 0.375

31 1.9375

7 px 0.4375

32 2

8 px 0.5

33 2.0625

9 px 0.5625

34 2.125

10 px 0.625

35 2.1875

11 px 0.6875

36 2.25

12 px 0.75

37 2.3125

13 px 0.8125

38 2.375

14 px 0.875

39 2.4375

15 px 0.9375

40 2.5

Default Bootstrap 4 1
font size

41 2.5625

16 px
17 px 1.0625

42 2.625

18 px 1.125

43 2.6875

19 px 1.1875

44 2.75

20 px 1.25

45 2.8125

21 px 1.3125

46 2.875

22 px 1.375

47 2.9375

23 px 1.4375

48 3

24 px 1.5

49 3.0625

25 px 1.5625

50 3.125

Find an error? Contact me

1.0:v4.0.0-alpha.6

: 11

Bootstrap

4 Cheat Sheet

1.0:v4.0.0-alpha.6, 4/22/17 Page

12/13

Multiples of common unites of measure
Multiples of 15

Multiples of 30

15

405

30

810

30

420

60

840

45

435

90

870

60

450

120

900

75

465

150

930

90

480

180

960

105

495

210

990

120

510

240

1020

135

525

270

1050

150

540

300

1080

165

555

330

1110

180

570

360

1140

195

585

390

1170

210

600

420

1200

225

615

450

1230

240

630

480

1260

255

645

510

1290

270

660

540

1320

285

675

570

1350

300

690

600

1380

315

705

630

1410

330

720

660

1440

345

735

690

1470

360

750

720

1500

375

765

750

1530

390

780

780

1560

Find an error? Contact me

1.0:v4.0.0-alpha.6

: 12

Learn Bootstrap 4 Basics... Fast
Improve your resumé
and learn responsive
web design fundamentals.
•

Stand out – Improve your resumé by being
proficient in the most popular front-end CSS
framework.

•

Be more efficient – Learn what’s new
in Bootstrap 4 and how it can help you
earn more in less time by boosting your
productivity.

•

Stay up to date – Get updated files when
framework minor updates are made to help
you stay current.

•

Connect – Ask questions and get to know
other web designers that use Bootstrap.

Homepage features
Responsive images
Image cards
Parallax backgrounds
Nested grids
SVG icons

Get Book Sample

bootstrapquickstart.com
Source Exif Data: 
File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.7
Linearized                      : Yes
Language                        : en-US
XMP Toolkit                     : Adobe XMP Core 5.6-c123 79.158978, 2016/02/13-01:11:19
Format                          : application/pdf
Title                           : Bootstrap 4 Cheat Sheet
Creator                         : Jacob Lett
Description                     : This reference is intended to help those familiar with the Bootstrap CSS framework to quickly see how to write the classes properly. For a clickable index please visit BootstrapCreative.com/?p=1905
Subject                         : bootstrap 4 css class, bootstrap class index, bootstrap cheat sheet, bootstrap 3 classes pdf, bootstrap cheat sheet
Create Date                     : 2017:04:22 09:52:14-04:00
Metadata Date                   : 2017:04:22 09:52:16-04:00
Modify Date                     : 2017:04:22 09:52:16-04:00
Creator Tool                    : Adobe InDesign CC 2015 (Macintosh)
Instance ID                     : uuid:a9abfe23-e6a0-d046-bb77-b63b7c89d68e
Original Document ID            : xmp.did:01801174072068118DBB90F3E6B630C7
Document ID                     : xmp.id:90af9c58-c6c7-4e52-b0ad-76143db8a554
Rendition Class                 : proof:pdf
Derived From Instance ID        : xmp.iid:074e0e87-dfe2-4be5-b324-ecdf34b076c8
Derived From Document ID        : xmp.did:E9F7DDAB4E2168119457D98D85ABF4F2
Derived From Original Document ID: xmp.did:01801174072068118DBB90F3E6B630C7
Derived From Rendition Class    : default
History Action                  : converted
History Parameters              : from application/x-indesign to application/pdf
History Software Agent          : Adobe InDesign CC 2015 (Macintosh)
History Changed                 : /
History When                    : 2017:04:22 09:52:14-04:00
Caption Writer                  : Jacob Lett
Marked                          : True
Web Statement                   : https://bootstrapcreative.com/
Producer                        : Adobe PDF Library 15.0
Trapped                         : False
Page Count                      : 13
Author                          : Jacob Lett
EXIF Metadata provided by EXIF.tools

Navigation menu