WebsiteSetup Editorial
WebsiteSetup Editorial
. No Comments

Bootstrap Cheat Sheet

If you plan to pick up some coding skills, Bootstrap 4 is a solid choice!

Why?

Because it is the gold standard of front-end development:

  • Bootstrap has built-in classes, meaning you don’t have to code most elements from scratch
  • 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.

If you are ready to roll, download our free bootstrap cheat sheet in PDF.

PDF Version of Bootstrap Cheat Sheet

👉 Bootstrap Cheat Sheet (Download PDF)

Infographic Version of Bootstrap Cheat Sheet (PNG)

👉 Bootstrap Cheat Sheet (Download PNG)

Bootstrap Cheat Sheet

Bootstrap Cheat Sheet

What Is Bootstrap?

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 the full documentation on the official website of Bootstrap.

Key Bootstrap Components

Bootstrap.css

This is the basic Bootstrap package that you will need to download. CSS is a style sheet language for static information.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Bootstrap.js

A JavaScript/jQuery library is what powers up certain components of Bootstrap such as animation, scrolling, and interactivity.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Glyphicons

Glyphs are elemental symbols with typography, such as the English Pound symbol (£). Bootstrap has a huge list of embedded glyph icons that are available for free.

Bootstrap Source Code Elements

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.

<script src="https://code.jquery.com/jquery.js"></script>

To install plug-ins:

<script src="js/bootstrap.min.js"></script>

Bootstrap Screen Sizes

Bootstrap Screen Sizes (Expand)

Bootstrap Key Components

Bootstrap Key Components (Expand)

Bootstrap Styling Essentials

Bootstrap Styling Essentials (Expand)

Want to ask a question or leave a comment?


Ask me anything

  • +

0 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

*