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:
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.
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
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.
