WIXLIB

Bootstrap 4.4.1CSS link rel "stylesheet" href 1/css/bootstrap.min.css" integrity "sha384-Vkoo8x4CGsO3 h" crossorigin "anonymous" JSJS is only necessary if you plan on using one or all of the following components: Alerts, Buttons,Carousel, Collapse, Dropdowns, Modals, Navbar, Tooltips and Scrollspy script src "https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity "sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin "anonymous" /script script src t/umd/popper.min.js"integrity "sha384-Q6E9RHvbIyZFJoft ossorigin "anonymous" /script script src 1/js/bootstrap.min.js"integrity ktj0Uod8GCExl3Og8ifwB6"crossorigin "anonymous" /script ComponentsAlertsBadgeBreadcrumbButtonsButton groupCardCarouselCollapseDropdownsFormsInput groupJumbotronUtilitiesList groupMedia ollspySpinnersToastsTooltipsBordersClearfixClose iconColorsDisplayEmbedFlexFloatImage ingSpacingStretched linkTextVertical alignVisibility

Bootstrap 4BreakpointsTypographyExtra small devices (portrait phones, less than576px) do not require a breakpoint becauseBootstrap 4 is mobile first.text-left Left aligned textsm Small 576px lg Large 992px None540pxmd Medium 768px 720px 1140pxMedia QueriesChange the width value to set a media queryfor sm, md, lg, xl./* Small devices (landscape phones, 576pxand up) */@media (min-width: 576px) { }Lists.list-unstyled Removes default list margin.dl-horizontal Makes list items twocolumns.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 .text-justify Justified text.text-nowrap No wrap text.text-(lowercause, uppercase, capitalize)Changes the text capitalization style.text-decoration-none Removes decoration960pxxl Extra large 1200px.text-center Center aligned text.text-right Right aligned textBreakpoints Max container widthnot needed Extra small 576px(auto).text-*-left Left aligned by breakpoint.text-truncate Truncate text with ellipsis.lead Good for first paragraph of article.text-monospace Changes to monospace font.font-weight-(bold, bolder, normal, light,lighter, italic) Changes the font weight.blockquote Slightly increases font-sizeand sets a bottom margin for blockquotes.(h1, h2, h3, h4, h5, h6) Used to make anelement match the heading styles.display-(1, 2, 3, 4) Large display text.1 96px, 2 88px, 3 72px, 4 black-50.text-white-50BootstrapCreative.com: 21

Bootstrap 4ImagesDisplay.img-fluid Make an image responsiveValue can equal one of the following:none, inline, inline-block, block,table, table-cell, table-row, flex,inline-flex.rounded Adds rounded corners to image.rounded-circle Crops image to be circle.img-thumbnail Adds rounded corner and imgborderFloats.float-left Floats item left.float-right Floats item right.float-none Removes float.d-(value) for xs.d-(sm, md, lg, and xl)-(value) setsdisplay value for breakpoint and upPosition.float-*-* Add breakpoints if needed.position-(static, relative, absolute,fixed, sticky) Sets CSS position valuesbut not responsiveBorders.fixed-(top, bottom) Position an elementto the top of the viewport.Add border.border Add border to all sides.sticky-top Position an element at the topof the viewport, but only after you scrollpast it. Not fully supported in IE.border-* (top, right, bottom, left) Addborder on a certain edgeShadowsRemove Border.border-0 Remove border to all sides.shadow The regular sized box drop shadow.border-*-0 (top, right, bottom, left)Remove border on a certain edge.shadow-(none, sm, lg) Remove box dropshadow or change its size.Border Radius.rounded Adds border radius on all edgesSizing.rounded-* (top, right, bottom, left,circle) Adds a border radius.rounded-0 Removes border radiusMake an element as wide or as tall (relative toits parent).w-(5%, 50%, 75%, 100%, auto) Sets width.h-(5%, 50%, 75%, 100%, auto) Sets height.mw-(5%, 50%, 75%, 100%, auto) Sets maxwidth.mh-(5%, 50%, 75%, 100%, auto) Sets maxheight

Bootstrap 4SpacingVisibilitySidesThese classes do not modify the displayproperty and do not affect layout.t top, b bottom, l left, r right,x x axis, y y-axisSizeThe values for each level of spacing arecalculation of the base font size which is 16pxor 1rem.Here the pixel equivalents. 0 0px, 1 4px,2 2px, 3-16px, 4 24px, 5 48px, auto.m(t, b, l, r, x, y)-(sm, md, lg, andxl)-(0, 1, 2, 3, 4, 5, auto) Sets marginvalue, remove breakpoint for xs.p(t, b, l, r, x, y)-(sm, md, lg, andxl)-(0, 1, 2, 3, 4, 5, auto) Sets paddingvalue, remove breakpoint for xs.mx-auto Used to horizontally center anelement relative to parent containerNegative MarginAdd the letter n in from of the margin sizevalue to apply a negative margin.visible Takes up space and visible.invisible Takes up space and invisibleOverflowSet how content overflows a parent element.overflow-auto Container will have ascroll if the content overflows.overflow-hidden The container will notscroll and the content will be cut off.Screenreaders.sr-only Only show on screen readers.sr-only-focusable Show element when ithas a focused stateFor example: .mt-n1 would apply a size 1negative top margin.Vertical Align.align-(baseline, top, middle, bottom,text-top, text-bottom) Changesthe vertical alignment of inline,inline-block, inline-table, and tablecell elements.BootstrapCreative.com: 23

Bootstrap 4Starter 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-tofit no" !-- Bootstrap CSS -- link rel "stylesheet" href 0/css/bootstrap.min.css" integrity "sha384-SI27wrMjH3ZZ89r4o fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin "anonymous" !-- 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 Popper, then Bootstrap JS. -- script src integrity "sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n"crossorigin "anonymous" /script script src t/umd/popper.min.js"integrity "sha384-Q6E9RHvbIyZFJoft ossorigin "anonymous" /script script src 0/js/bootstrap.min.js"integrity 54VjQBEU341pvjz7Dv3n6P"crossorigin "anonymous" /script !-- Main JS -- script src "js/main.js" /script /body /html

Bootstrap 4One Column Centered GridFigures div class "container" figure class "figure" div class "row justify-contentcenter" 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 Responsive Container & Row div class "container-md" div class "row row-cols-1 row-colsmd-3" div class "col" /div div class "col" /div div class "col" /div /div /div img src "https://dummyimage.com/100x100/563d7c/fff&text "class "figure-img img-fluid rounded"alt "image" figcaption class "figure-caption" Acaption for the above image. /figcaption /figure Media Object div class "media" img src "https://dummyimage.com/100x100/563d7c/fff&text "class "mr-3" alt "image" div class "media-body" h5 class "mt-0" Media heading /h5 Media object description text /div /div Code code Used to display inline code in a paragraph pre class "pre-scrollable" Display multiple lines of code. Use .prescrollable class to set a max-height of 340pxand provide a y-axis scrollbar var Used to display math variables kbd Used to display keyboard input samp Used to display sample outputBootstrapCreative.com: 25

Bootstrap 4Navbar nav class "navbar navbar-toggleable-md navbar-dark bg-primary" button class "navbar-toggler navbar-toggler-right" type "button" datatoggle "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

Bootstrap 4Modal !-- Button trigger modal -- button type "button" class "btn btn-primary" data-toggle "modal" datatarget "#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 BootstrapCreative.com: 27

Bootstrap 4Forms 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 emailwith anyone 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 buttonExample a class "btn btn-primary" href "#" role "button" Link /a button class "btn btn-secondary" type "submit" Button /button