Bootstrap Cheat Sheet Flashcards
Understand the most important concepts, syntax, and "things to do" using Bootstrap CSS templates.
Name at least 10 of the most common Bootstrap classes you might want to use in a web application.
If you can get 20 or more, you’re pretty good!
Alerts Forms Navbar Badges Buttons Button Groups Button Modifiers Cards Carousel Collapse Dropdowns Form Input Groups Custom Forms Grids Images Jumbotron List Group Media Objects Modal Navs Pagination Popover Progress Utility: Display Utility: Flexbox Utility: Misc Utility: Positioning Utility: Borders Utility: Colors Utility: Sizing Utility: Spacing Utility: Text Spinner Tables toast tooltip Typography
What is Popper.js and how is it used?
Popper.js is a positioning engine, its purpose is to calculate the position of an element to make it possible to position it near a given reference element.
< !DOCTYPE html >
< html >
< head >
< title >Popper Tutorial< /title >
< /head >
< body >
< button id="button" aria-describedby="tooltip" >My button< /button >
< div id="tooltip" role="tooltip" >My tooltip< /div >
< script src="https://unpkg.com/@popperjs/core@2" >< /script >
< script >
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
const popperInstance = Popper.createPopper(button, tooltip); < /script > < /body > < /html >
Popper.js is only required for Bootstrap 4, and everything except tooltips, popovers, dropdowns, modals can still be used.
Popper itself is most commonly used for pop-up tooltips that come to exist based on some action on the page. See Popper on Google for examples.
The bootstrap grid is divided into _____ columns
12 columns
Explain how the different columns sizes on bootstrap apply to different devices:
col-lg-2 // class used for large devices like laptops col-md-2 // class used for medium devices like tablets col-sm-2// class used for small devices like mobile phones
In Bootstrap, content MUST be placed within…
Columns
What Bootstrap CSS class name would you use to make a full width container in Bootstrap?
.container-fluid { … }
If you want to have 3 equal columns in Bootstrap, which CSS class would you use?
.col-md-4
Choose the multiple of 12 which is closest to match what you need.
The letters in between indicate sm small – md medium – lg large
Which of the following is correct about Bootstrap Responsive Images?
A- Bootstrap 3 allows you to make the images responsive by adding a class .img-responsive to the img tag.
B - .img-responsive class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.
C - Both of the above
C. Both
How do you style a basic table with llight padding and horizontal dividers?
Add the .table bootstrap class to the table:
< table class="table" >
< thead >
< tr >
< th scope="col" >#< /th >
< th scope="col" >First Name< /th >
< th scope="col" >Last Name< /th >
< th scope="col" >Handle< /th >
< /tr >
< /thead >
< tbody >
< tr >
< th scope="row" >1< /th >
< td >Mark< /td >
< td >Otto< /td >
< td >@mdo< /td >
< /tr >
< tr >
< th scope="row" >3< /th >
< td >Larry< /td >
< td >the Bird< /td >
< td >@twitter< /td >
< /tr >
< /tbody >
< /table >
Which of the following bootstrap style of button indicates a successful or positive action?
A - .btn
B - .btn-primary
C - .btn-success
D - .btn-info
C.
btn-success
Which of the following bootstrap style of image makes the entire image round by adding border-radius:500px?
A - .img-rounded
B - .img-circle
C - .img-thumbnail
D - None of the above.
B.
.img-circle
Which of the following bootstrap style is used to add text to .navbar?
A - .navbar-text
B - .text
C - .form-text
D - None of the above.
A.
To wrap strings of text in an element use the class .navbar-text. This is usually used with <p> tag for proper leading and color.</p>
Explain about the .pagination class in bootstrap
< div class="container" >
< h2 >Pagination< /h2 >
< p >The .pagination class provides pagination links:< /p >
< ul class="pagination" >
< li >< a href="#">1< /a >< /li >
< li >< a href="#">2< /a >< /li >
< li >< a href="#">3< /a >< /li >
< li >< a href="#">4< /a >< /li >
< li >< a href="#">5< /a >< /li >
< /ul >
< /div >
This creates a small series of boxes with links to each possible page.
Which of the following is correct about Bootstrap jumbotron?
A - This component can optionally increase the size of headings and add a lot of margin for landing page content.
B - To use the Jumbotron: Create a container <div> with the class of .jumbotron.
C - Both of the above.
D - None of the above.</div>
C. Both
Explain about the .panel-footer Bootstrap CSS class
You can add footers to panels by wrapping buttons or secondary text in a < div > containing class .panel-footer< /div >
Which class provides a responsive fixed width container?
.container
Which class provides a full width container, spanning the entire width of the viewport?
.container-fluid
Which class adds zebra-stripes to a table?
.table-striped
Which class shapes an image to a circle?
.img-circle
Which class is used to create a big box for calling extra attention?
.jumbotron
Which button class is used to create a large button?
.btn-lg
Which class is used to create a button group?
.btn-group
How can you insert a search icon using Bootstrap?
< span class=”glyphicon glyphicon-search” >< /span >
Which bootstrap class adds a heading to a panel?
.panel-heading
Which bootstrap class indicates a dropdown menu?
.dropdown
A standard navigation tab is created with:
< ul class=”nav nav-tabs” >
A standard navigation bar is created with:
< nav class=”navbar navbar-default” >
Which class is used to create a black navigation bar?
.navbar-inverse
Which plugin is used to cycle through elements, like a slideshow?
Carousel
Which plugin is used to create a modal window?
Modal
Bootstrap’s global default line-height
1.428
How can you insert a search icon?
< span class=”glyphicon glyphicon-search” > < /span >
What are the three main elements of the Bootstrap grid listed in the proper order.
CRC = .container > .row > .col
Match the right Bootstrap breakpoint keyword to the correct media query starting point
HINT: This is about pixel widths on devices matches to Bootstrap keywords
xs <576px sm ≥576px md ≥768px lg ≥992px xl ≥1200px
Fill in the blank: Setting a grid tier of .col-sm-6 says ___________
Make this div 6 columns wide on the sm breakpoint and everything ABOVE
In Bootstrap 4, 1 rem = _____ px?
16px
Show how to use a card: code example
< div class=”card” >
< img class=”-img-top” src=”” alt=”image” >
< div class=”-block” >
< h4 class=”-title” >Card title< /h4 >
< p class=”-text” >Copy< /p >
< a href=”#” class=”btn btn-primary” >Link< /a >
< /div >
< /div >
Which bootstrap styles are used to create a vertical pills navigation?
.nav, .nav-pills, .nav-stacked
Which of the following aspect ratio is used with responsive video in bootstrap?
A. Embed-responsive-4by3
B. Embed-responsive-16by9
C. Both
D. None
C. Both
Embed-responsive-4by3
Embed-responsive-16by9
About Bootstrap cross-browser compatibility which of the following is right?
A. Bootstrap use Normalize to establish cross browser compatibility
B. Normalize.css is a modern, HTML5-ready alternative to CSS resets
C. Normalize.css is a CSS file that provides cross-browser compatibility in the default styling of HTML elements
D. All of the above
D. All of the above
create a button as a link in bootstrap?
.btn-link
Default size of H6 bootstrap heading
12px
How do you use a carousel? Show the HTML code for creating and using a bootstrap carousel.
< div id=”carouselExampleControls” class=”carousel slide” data-ride=”carousel” >
< div class=”carousel-inner” >
< div class=”carousel-item active” >
< img class=”d-block w-100” src=”…” alt=”First slide” >
< /div >
< div class=”carousel-item” >
< img class=”d-block w-100” src=”…” alt=”Second slide” >
< /div >
< div class=”carousel-item” >
< img class=”d-block w-100” src=”…” alt=”Third slide” >
< /div >
< /div >
< a class=”carousel-control-prev” href=”#carouselExampleControls” 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=”#carouselExampleControls” role=”button” data-slide=”next” >
< span class=”carousel-control-next-icon” aria-hidden=”true” > < /span >
< span class=”sr-only” > Next< /span >
< /a >
< /div >
Describe about the differences between Bootstrap 3 and Bootstrap 4.
(If you can say 3 sentences about the differences, you’re pretty good!)
Bootstrap 4 is written using Flexbox Grid, whereas Bootstrap 3 was written using the float method.
Bootstrap 4 uses rem CSS units whereas Bootstrap 3 uses px.
Panels, thumbnails, and wells have been dropped entirely for bootstrap 4.
Bootstrap 3 uses LESS while Bootstrap 4 uses SASS
Name 5 different table classes in bootstrap
table table-striped table-bordered table-hover table-condensed
Name all the Bootstrap color names:
CSS Class applied to paragraph or link: .text-primary LIGHT BLUE .text-secondary GREY .text-success GREEN .text-danger RED .text-warning ORANGE .text-info TEAL .text-light MILKY WHITE .text-dark DARK GREY .text-muted LIGHT GREY .text-white OFF WHITE
CSS Class Applied to Divs: .bg-primary .bg-secondary .bg-success .bg-danger .bg-warning .bg-info .bg-light .bg-dark .bg-white
Make an alert message that is closeable in HTML using the Bootstrap CSS classes:
< div class=”alert alert-success alert-dismissible” >
< button class=”close” data-dismiss=”alert” >X< /button >
Alert message goes here.
< /div >
Add a Bootstrap class to let a button span the entire width of the parent element. (Show HTML code)
< button class=”btn btn-primary btn-block” > Button < /button >
Show how to create a button grouping of 3 buttons in using Bootstrap CSS classes (show the HTML code)
< div class=”btn-group btn-group-lg” >
< button class=”btn btn-primary” > Apple
< button class=”btn btn-primary” > Samsung < /button >
< button class=”btn btn-primary” > Sony < /button >
< /div >
btn-group-lg is optional but makes a bigger box.
Show how to create a VERTICAL grouping of 3 buttons using Bootstrap CSS classes (show the HTML code)
< div class=”btn-group-vertical” >
< button class=”btn btn-primary”> Apple button >
< button class=”btn btn-primary” > Samsung button >
< button class=”btn btn-primary” > Sony button >
< /div >
Show how to make a button group of 3 buttons that spans the entire width of its container.
< div class=”btn-group-justified” >
< button class=”btn btn-primary” > Apple
< button class=”btn btn-primary” > Samsung
< button class=”btn btn-primary” > Sony
< /div >
How do you make a search button using Bootstrap?
HINT: glyphicon
< span class=”glyphicon glyphicon-search” >< /span >
How do you make a print button using Bootstrap?
HINT: glyphicon
< span class=”glyphicon glyphicon-print” > < /span >
How do you add a “badge” around text using Bootstrap?
Show a badge inside of a button.
Show a badge inside of a heading.
< button > Comments
< span class=”badge” > 2 < /span >
< /button >
< h4 > Example heading < span class=”badge badge-secondary” > New < /span > < /h4 >
How do you make a label using Bootstrap? Show the usage of a label inside of a header element.
< h3 > Ice Cream
< span class=”label label-default” > YES < /span >
< /h3 >
Use Bootstrap to make a progress bar on an HTML page.
Hint: nested div
< div class="progress" >
< div class="progress-bar active" role="progressbar"
style="width:70%" >
< /div >
< /div >Create a simple pagination menu using Bootstrap. Make it contain 3 pages (links).
Show the HTML code
< ul class="pagination" > < li >< a href="#" >1< /a >< /li > < li >< a href="#" >2< /a >< /li > < li > < a href="#" >3 < /a> < /ul >
Create a basic (default) Bootstrap Panel with the words: “Hello World”.
< div class=”panel panel-default” >
< div class=”panel-body” >Hello World < /div >
< /div >
Add a heading to a panel with the words “My Header”.
Add a body to the same panel with the words “Hello World”
< div class=”panel panel-default” >
< div class=”panel-heading” > My Header < /div >
< div class=”panel-body” > Hello World < /div >
< /div >
Add the required Bootstrap CSS classes and attributes to HTML to create a dropdown list that has a button to toggle whether the list is expanded or not.
Hint: div dropdown class with a btn dropdown-toggle on the inside before a dropdown-menu
< div class=”dropdown” >
< button data-toggle=”dropdown”
class=”btn btn-primary dropdown-toggle” >
Dropdown Example
< span class=”caret” >< /span >< /button >
< ul class=”dropdown-menu” >
< li >< a href=”#” >HTML< /a >< /li >
< li >< a href=”#” >CSS< /a >< /li >
< li >< a href=”#” >JavaScript< /a >< /li >
< /ul >
< /div >
