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
