Download Bootstrap Cheat Sheet: Components, Code Elements, Styling Essentials and more Cheat Sheet Web Design and Development in PDF only on Docsity!
Bootstrap
Cheat Sheet
Why?
What is Bootstrap?
If you plan to pick up some coding skills,
Bootstrap 4 is a solid choice!
It is the gold
standard of front-end
development:
If you are ready to roll, download our free Bootstrap cheat sheet in PDF.
Bootstrap has built-in classes, meaning you don’t have to code most elements from scratch. Bootstrap 4 is a popular framework for front-end website development. Primarily, it is a CSS mobile- first design and includes both CSS and JavaScript templates for such things as forms, buttons, navigation, typography, dropdowns, popovers, modals, and carousels, along with other interface elements. But don’t misjudge it: Bootstrap also offers plenty of room for customization and you can use it to code any type of website. You can check out full documentation on the official website. It’s open-source and has major community support. Plus, it’s super versatile and can be used to create any type of website in no time.
.active
Key Bootstrap Components
Bootstrap source code elements
Bootstrap Key Components
Bootstrap Screen Sizes
Bootstrap Styling Essentials
Table of Contents
Bootstrap source code elements Bootstrap Screen Sizes The Bootstrap source code download includes the precompiled CSS, JavaScript, and font assets, along with source Less, JavaScript, and documentation. less/ - a preprocessor style sheet for CSS that eliminate repetitive coding tasks sass/ - a newer version of the preprocessor that is more popular js/ - simply refers to the source code JavaScript, which allows Bootstrap components to work fonts/ - these are icon fonts that come with the download dist/ - a folder that contains precompiled files for drop-in use in website development Note: Bootstrap also requires jQuery installation for Bootstrap’s JavaScript plugins. jQuery is a feature-rich component of the JavaScript library, and it whittles down lots of JavaScript code and wraps them into actions you can accomplish with a single line.
To install plug-ins:
Bootstrap 4 is a mobile-first responsive framework. But still you need to provide screen size instructions when you are creating page layout grids. Below are the standard screen sizes for reference:
Min:
@media (min-width: @screen-sm-min) // >= 768px (small tablet) @media (min-width: @screen-md-min) // >= 992px (medium laptop) @media (min-width: @screen-lg-min) // >= 1200px (large desktop)
Max:
@media (max-width: @screen-xs-max) { // < 768px (xsmall phone) @media (max-width: @screen-sm-max) { // < 992px (small tablet) @media (max-width: @screen-md-max) { // < 1200px (medium laptop) XS SM MD LG 768 992 1200 PHONE TABLET LAPTOP DESKTOP
Bootstrap Key Components Alerts Alerts are messages to users when something is wrong. For example, if a user types in an incorrect email address or credit card number, they’ll receive an error alert message, prompting them to make corrections.
.alert-primary
You can create colorful alerts for any texts. Primary alert (more important message) is in light blue color. Primary alert
.alert-secondary
Add a secondary alert (less important message) in light gray color. I’m a secondary alert
.alert-success
This will alert a user that their action has been successful Success alert!
.alert-warning
This will send a message of an upcoming action. Warning! Warning!
.alert-danger
A danger alert is similar to a warning alert, but for more negative actions (e.g., getting locked out after too many password fails) You are in grave danger, my friend!
.alert-link
So you want to add another message and a link to that message in the original alert? You can embed that message and in the same color. Success! You should read this cool message.
.alert-dismissible
Provides an option to close the alert after reading it. ×Success! You did well
.alert-heading
Add a quick header to your alert. (e.g., “shipping address” or “billing address”). It could relate to an entire page or just a piece of content within that page.
.alert-light and .alert-dark
Changes the alert style to an in either a light or dark gray color. I’m the light alert And I’m the dark (side) alert!
.Breadcrumbs .buttons Breadcrumbs are navigational components that will help users move from page to page without getting lost and give them the way to pedal back to a previous page.
Home
Home Library
Home Library Data
As the name hints, .button command lets you create and style … a button.
.button-primary + .button-secondary
A primary button is commonly used for a user action; a secondary button may then be used to close out. Primary Secondary
.btn-light, -dark .btn-primary, -secondary, -transparent, -white,
-warning, -success, -info, -danger
Design your buttons using the standard predefined styling options: Light Dark Success Info Danger Warning Transparent White
.btn-outline
Choose a button outline following these snippet samples: Primary
.btn-lg + .btn-sm
Change the size of your buttons. I’m the large button I’m a small button
.btn-block
Group your buttons into a block. All grouped buttons will span the full width of a parent. Block level button
.active
By default, all buttons will be displayed as pressed - with a dark border, darker background and inset shadow - when active. You don’t need to add a class to s as they use a pseudo-class. But, if for some reason, you need to force that same active look, use the following code snippet: Primary link Note: You can also add the disabled Boolean attribute to any button to make it look inactive. Disabled button Button Group Use this element to make a group of similarly-sized buttons without coding each separately.
.btn-group
Left Middle Right
.btn-group-vertical
Style a vertical group of buttons:
Left Middle Right
.btn-group (Nested)
You can also create nested buttons with drop down menus.
1 2
Dropdown
Dropdown link Dropdown link
.card-text
Add some words to your card. As many or as few as you want.
Roses are red, violets are blue, I’m learning Bootstrap, What about you?
.card-img-top
You can also enclose an image to your card. This snippet will add one atop of it.
What an epic image!
.card-img-bottom
Or you can have the image displayed as a bottom of the card. Your call.
Look at that pic!
.card-img-overlay
Use an image as a background and overlay all the texts.
I’m text that has a background image!
.card-header
Place a custom header at the top of your card. It will be displayed above all the titles and subtitles.
Some big header!
.card-footer
Also, you can code a footer for your card to communicate some extra info. It will go right after the .card-body.
Some more card content
Updated 2 days ago
.card-group
Play around with card layout and build a group of cards.A group will act as a single, attached element, with every card having the same width and height. You can also apply display: flex; to improve sizing. Note: Group card layouts are not responsive!
Card number one
I’m the first card in the group, displaying some cool info.
Card number two
I’m the middle card in the group and probably I offer the best deal
Card three
I’m the third card trying to be as cool as the first one.
.card-columns
You can organize your cards into Masonry-like columns. This allows you to build some creative patterns using only CSS. NB: If your cards are breaking across columns, set them to display: inline-block.
.carousel-fade
Add this cool fade out effect for a slide before the next one.
Previous
Next
.carousel-indicators
Add control and support for next/previous and indicators such as slide number.
Previous
Next
.carousel-caption
Add a funky caption to each or several slides.
Cool Slide Label
I’m so proud of myself for coding this slide.
Even Cooler label
Yep, totally rocking this whole coding thing.
Previous
Next
Collapse & Accordion Collapse is a JavaScript plugin you can use to hide content under the “collapse” menu. The collapsed element will animate it’s height from 0 to its normal value when triggered and vice versa.
.collapse
Hide your content.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
.collapse show
Display the collapsed content. Some text you’ve decided to hide
.collapse.options
Activate content as collapsible element; accepts optional objects $(‘#myCollapsible’).collapse({ toggle: false })
.custom-radio
…and you can style a custom radio too!
Give this custom radio a toggle
.custom-switch
Lastly, you can also create a stylish custom switch.
Toggle this switch element
.custom-select
Use this command to add a custom select menu.
.custom-file
Customize user file upload. To do so, add .custom-file class around the input with type=”file”. Then add the .custom-file- input to it.
Choose file
.custom-range
Design a custom range menu. Basic range
Range with steps
Dropdowns Use this plugin to create contextual overlays for displaying lists of user links. It’s a handy option for creating menus. Dropdowns are built through Popper.js, part of a third-party library. Thus, Make sure you include popper.min.js before Bootstrap’s own JavaScript. Or you can just use bootstrap.bundle.min.js/ bootstrap.bundle.js. Both contain Popper.js. Quick styling tip: all dropdowns in Bootstrap are toggled by clicking, not hovering.
.dropdown
Add a simple dropdown menu with buttons.
Dropdown
Action Another action
.dropdown-toggle-split
Create split button dropdowns with proper spacing around the dropdown caret.
Dropdown
Toggle Dropdown
Action Another action
.dropup
Did you know that you can style a menu coming up rather than down? Now you do!
Dropup
.dropright
Provide the menu to the right of the button.
Dropright
Forms You can easily build attractive forms and code custom styles, layouts and additional elements. In Bootstrap 4, forms also received some new input controls such as number election, email verification and others, along with a bunch of new responsive classes.
Example of .form-group
Email address
Your password
Remember me
Submit
.form-control
Use this class to style all textual form controls such as user input, titles, etc.
Email address
.form-control-file
Add this class whenever you need to provide the user with an option to upload a file to the form.
.form-control-lg and .form-control-sm.
Create a visual hierarchy within your form by adding .form-control-lg to make bigger input areas and .form-control-sm to make smaller ones.
.form-control-plaintext
Use this class to correctly display elements in your form. It will replace the default form field styling with plain text, while keeping the correct margin and padding.
Email
Pass
.form-control-range
Set horizontally scrollable range inputs for your form.
Some range input
.form-check
Add checkboxes to your form.
My first checkbox
Note: You can also add radio buttons instead of checkboxes using form-check-input” type=”radio”.
.form-check-inline
Create a horizontal list of checkboxes.
1
2
.readonly boolean attribute
Specify that certain form input is read only. This will prevent modification of the input’s value.
