WIXLIB

BootstrapBreakpoints4 Cheat SheetBreakpointsExtra small 544pxSmall 544pxMedium 768pxLarge 992pxExtra large 1200pxTypography.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 articleBlockquote blockquote class "blockquote" p class "m-b-0" Lorem ipsum dolor sitamet, consectetur adipiscing elit. Integerposuere erat a ante. /p /blockquote Headings h1 h1. Bootstrap heading small Secondarytext /small /h1 p class "h1" Paragraph that looks likeheading /p 1.1:v4.0.0-beta.1 8/12/17 -white.list-unstyled Removes default list margin.dl-horizontal Makes list items two columns.list-inline Makes list items inline.list-inline-item Added to each liExample ul class "social-icons list-inline" li class "list-inline-item" item 1 /li /ul Images.img-fluid Make an image responsive.rounded Adds rounded corners to image.rounded-circle Crops image to be circle.img-thumbnail Adds rounded corner borderFloats.float-left Floats item left.float-right Floats item right.float-none Removes float.float-*-* Add breakpoints if neededFind an error? Contact me1.1:v4.0.0-beta.1:1

BootstrapStarter Template4 Cheat Sheet1.1:v4.0.0-beta.1 8/12/17 Page2/14 !DOCTYPE html html lang "en" head !-- Required meta tags -- meta charset "utf-8" meta name "viewport" content "width device-width, initial-scale 1, shrink-to-fit no" !-- Bootstrap CSS -- link rel "stylesheet" href eta/css/bootstrap.min.css" !-- Main CSS -- link rel "stylesheet" href "css/main.css" /head body div class "container" h1 Hello, world! /h1 div class "row" div class "col-sm-6" Left Column /div div class "col-sm-6" Right Column /div /div /div !-- jQuery first, then Tether, then Bootstrap JS. -- script src "https://code.jquery.com/jquery-3.2.1.slim.min.js" /script script src 1.11.0/umd/popper.min.js" /script script src eta/js/bootstrap.min.js" /script !-- Main JS -- script src "js/main.js" /script /body /html Find an error? Contact me1.1:v4.0.0-beta.1:2

Bootstrap4 Cheat Sheet1.1:v4.0.0-beta.1 8/12/17 Page3/14One Column Centered Grid div class "container" div class "row justify-content-center" div class "col-md-6" /div /div /div Two Column Grid div class "container" div class "row" div class "col-sm-6" /div div class "col-sm-6" /div /div /div Three Column Grid div class "container" div class "row" div class "col-sm-4" /div div class "col-sm-4" /div div class "col-sm-4" /div /div /div Four Column Grid div class "container" div class "row" div class "col-sm-3" /div div class "col-sm-3" /div div class "col-sm-3" /div div class "col-sm-3" /div /div /div Find an error? Contact me1.1:v4.0.0-beta.1:3

BootstrapNavbar4 Cheat Sheet1.1:v4.0.0-beta.1 8/12/17 Page4/14 nav class "navbar navbar-toggleable-md navbar-dark bg-primary" button class "navbar-toggler navbar-toggler-right" type "button" data-toggle "collapse"data-target "#navbarNavDropdown" aria-controls "navbarNavDropdown" aria-expanded "false"aria-label "Toggle navigation" span class "navbar-toggler-icon" /span /button a class "navbar-brand" href "#" Navbar /a div class "collapse navbar-collapse" id "navbarNavDropdown" ul class "navbar-nav" li class "nav-item active" a class "nav-link" href "#" Home span class "sr-only" (current) /span /a /li li class "nav-item" a class "nav-link" href "#" Features /a /li li class "nav-item" a class "nav-link" href "#" Pricing /a /li li class "nav-item dropdown" a class "nav-link dropdown-toggle" href "http://example.com"id "navbarDropdownMenuLink" data-toggle "dropdown" aria-haspopup "true" ariaexpanded "false" Dropdown link /a div class "dropdown-menu" aria-labelledby "navbarDropdownMenuLink" a class "dropdown-item" href "#" Action /a a class "dropdown-item" href "#" Another action /a a class "dropdown-item" href "#" Something else here /a /div /li /ul /div /nav Find an error? Contact me1.1:v4.0.0-beta.1:4

BootstrapModal4 Cheat Sheet1.1:v4.0.0-beta.1 8/12/17 Page5/14 !-- Button trigger modal -- button type "button" class "btn btn-primary" data-toggle "modal" data-target "#myModal" Launch demo modal /button !-- Modal -- div class "modal fade" id "myModal" tabindex "-1" role "dialog" arialabelledby "exampleModalLabel" aria-hidden "true" div class "modal-dialog" role "document" div class "modal-content" div class "modal-header" h5 class "modal-title" id "exampleModalLabel" Modal title /h5 button type "button" class "close" data-dismiss "modal" aria-label "Close" span aria-hidden "true" × /span /button /div div class "modal-body" h2 Modal body heading /h2 p Modal body text description /p /div div class "modal-footer" button button type "button" class "btn btn-secondary" data-dismiss "modal" Close / button type "button" class "btn btn-primary" Save changes /button /div /div /div /div Find an error? Contact me1.1:v4.0.0-beta.1:5

BootstrapForms4 Cheat Sheet1.1:v4.0.0-beta.1 8/12/17 Page6/14 form div class "form-group" label for "exampleInputEmail1" Email address /label input type "email" class "form-control" id "exampleInputEmail1" ariadescribedby "emailHelp" placeholder "Enter email" small id "emailHelp" class "form-text text-muted" We'll never share your email withanyone else. /small /div div class "form-group" label for "exampleInputPassword1" Password /label input type "password" class "form-control" id "exampleInputPassword1"placeholder "Password" /div div class "checkbox" label input type "checkbox" Check me out /label /div button type "submit" class "btn btn-primary" Submit /button /form Buttons.btn Needs to be added to all buttons because it adds padding and margin.btn-* primary, secondary, success, danger, warning, info, light, dark, link.btn-outline-* primary, secondary, success, danger, warning, info, light, dark, link.btn-lg Large buttom.btn-sm Smaller than default button a class "btn btn-primary" href "#"role "button" Link /a button class "btn btn-secondary"type "submit" Button /button Find an error? Contact me1.1:v4.0.0-beta.1:6

BootstrapCarousel4 Cheat Sheet1.1:v4.0.0-beta.1 8/12/17 Page7/14 div id "carousel-name" class "carousel slide" data-ride "carousel" ol class "carousel-indicators" li data-target "#carousel-name" data-slide-to "0" class "active" /li li data-target "#carousel-name" data-slide-to "1" /li li data-target "#carousel-name" data-slide-to "2" /li /ol div class "carousel-inner" role "listbox" div class "carousel-item active" img class "d-block img-fluid" src "https://dummyimage.com/900x340/563d7c/fff&text " alt "First slide" div class "carousel-caption d-none d-md-block" h3 Carousel Slider Title /h3 p Description text to further describe the content of the slide image /p a href "" class "btn btn-primary" Call to Action /a /div /div div class "carousel-item" img class "d-block img-fluid" src "https://dummyimage.com/900x340/563d7c/fff&text " alt "Third slide" div class "carousel-caption d-none d-md-block" a href "" class "btn btn-primary" Call to Action /a /div /div /div a class "carousel-control-prev" href "#carousel-name" role "button" data-slide "prev" span class "carousel-control-prev-icon" aria-hidden "true" /span span class "sr-only" Previous /span /a a class "carousel-control-next" href "#carousel-name" role "button" data-slide "next" span class "carousel-control-next-icon" aria-hidden "true" /span span class "sr-only" Next /span /a /div Find an error? Contact me1.1:v4.0.0-beta.1:7

BootstrapJumbotron4 Cheat Sheet1.1:v4.0.0-beta.1 8/12/17 Page8/14 div class "jumbotron jumbotron-fluid" div class "container" h1 class "display-3" Fluid jumbotron /h1 p class "lead" This is a modified jumbotron that occupies the entire horizontal spaceof its parent. /p /div /div Card div class "card" style "width: 20rem;" img class "card-img-top w-100" src "https://dummyimage.com/600x400/563d7c/fff"alt "Card image cap" div class "card-body" h4 class "card-title" Card title /h4 p class "card-text" Some quick example text to build on the card title and make upthe bulk of the card's content. /p a href "#" class "btn btn-primary" Go somewhere /a /div /div Breadcrumbs ol class "breadcrumb" li a href "#" Home /a /li li a href "#" Library /a /li li class "active" Data /li /ol Responsive embed div class "embed-responsive embed-responsive-16by9" iframe class "embed-responsive-item" src "." /iframe /div Find an error? Contact me1.1:v4.0.0-beta.1:8

BootstrapTables4 Cheat Sheet1.1:v4.0.0-beta.1 8/12/17 Page9/14 table class "table" thead class "thead-default" tr th # /th th thead-default /th /tr /thead tbody tr th scope "row" 1 /th td Nina /td /tr /tbody /table table class "table" thead class "thead-inverse" tr th # /th th thead-inverse /th /tr /thead tbody tr th scope "row" 1 /th td Nina /td /tr /tbody /table Find an error? Contact me1.1:v4.0.0-beta.1:9

Bootstrap4 Cheat Sheet1.1:v4.0.0-beta.1 8/12/17 Page10/14Component 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 breakthe 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 orsection to make updating easier */@media (min-width: 480px) {.component-heading { width:auto; }}Find an error? Contact me1.1:v4.0.0-beta.1: 10

Bootstrap4 Cheat Sheet1.1:v4.0.0-beta.1 8/12/17 Page11/14Need the full list of classes?Get a textfile of all of the classesReference the classes in a sortable table with an image previewand short /bootstrap-4-css-classes-index/Find an error? Contact me1.1:v4.0.0-beta.1: 11

Bootstrap4 Cheat Sheet1.1:v4.0.0-beta.1 8/12/17 Page12/14Convert Pixels to REMSPixels REMSPixels REMS1 px 0.062526 1.6252 px 0.12527 1.68753 px 0.187528 1.754 px 0.2529 1.81255 px 0.312530 1.8756 px 0.37531 1.93757 px 0.437532 28 px 0.533 2.06259 px 0.562534 2.12510 px 0.62535 2.187511 px 0.687536 2.2512 px 0.7537 2.312513 px 0.812538 2.37514 px 0.87539 2.437515 px 0.937540 2.5Default Bootstrap 4 1font size41 2.562516 px17 px 1.062542 2.62518 px 1.12543 2.687519 px 1.187544 2.7520 px 1.2545 2.812521 px 1.312546 2.87522 px 1.37547 2.937523 px 1.437548 324 px 1.549 3.062525 px 1.562550 3.125Find an error? Contact me1.1:v4.0.0-beta.1: 12

Bootstrap4 Cheat Sheet1.1:v4.0.0-beta.1 8/12/17 Page13/14Multiples of Common Units of MeasureMultiples of 15Multiples of 576575015303907807801560Find an error? Contact me1.1:v4.0.0-beta.1: 13

Learn Bootstrap 4 Basics. FastImprove your resuméand learn responsiveweb design fundamentals. Stand out – Improve your resumé by beingproficient in the most popular front-end CSSframework. Be more efficient – Learn what’s newin Bootstrap 4 and how it can help youearn more in less time by boosting yourproductivity. Stay up to date – Get updated files whenframework minor updates are made to helpyou stay current. Connect – Ask questions and get to knowother web designers that use Bootstrap.Homepage featuresResponsive imagesImage cardsParallax backgroundsNested gridsSVG iconsGet Book Samplebootstrapquickstart.com

Bootstrap Cheat Sheet 1.1:v4.0.0-beta.1 8/12/17 Page 2/14 4 Find an error? Contact me 1.1:v4.0.0-beta.1: 2 Starter Template !DOCTYPE html html lang "en" head !-- Required meta tags -- meta charset "utf-8" meta name "viewport" content "width device-width, initial-scale 1, shrink-to-fit no" !-- Bootstrap CSS --