Bootstrap 4 Cheat sheet

Bootstrap4

Bootstrap 4 Cheat sheet – Introduction

Bootstrap 4 is the newest and most advanced version of bootstrap. It is the most popular framework for HTML, CSS, and JavaScript being used to develop responsive and mobile based applications. Bootstrap 4 like earlier versions is the free and open source.

Bootstrap 4 works on all modern browsers above internet explorer 9.

Bootstrap 4 cheat sheet has incorporated a major overhaul from Bootstrap 3. A lot of changes has happened to most of the components that include tables, forms, dropdowns, grids, navbars etc.

Major benefits from frameworks like Bootstrap is that they can speeds up development times even when maintaining quality and consistency of the application across the site. That means we no longer need to re-write and re-design everything from ground zero for the different set of devices. And also, we don’t need to waist several hours trying to fix everything and ensuring that it looks and works right across different browsers, unique platforms, and devices.

Commands and Description on Bootstrap 4 Cheat sheet

Some important Bootstrap 4 commands and their description is provided below: –

CommandsDescription
Fixed ContainerA fixed container has a fixed width. As the browser is resized, its width remains same until it breakpoint is found.
Fluid ContainerA fluid container spans to the full width of the available viewport. It expands and contracts fluidly meaning it changes as the browser is resized.
.Col-It is for extra small devices – screen width is less than 576px
.Col-sm-It is for small devices – screen width remains equal to or greater than 576px
.Col-md-It is for medium devices – screen width remains equal to or greater than 768px
.Col-lg-It is for large devices – screen width goes equal to or greater than 992px
.Col-xl-It is for xlarge devices – screen width is equal to or greater than 1200px
<h1> – <h6>h1 Bootstrap size heading with 2.5rem = 40px
h2 Bootstrap size heading with 2rem = 32px
h3 Bootstrap size heading with 1.75rem = 28px
h4 Bootstrap size heading with 1.5rem = 24px
h5 Bootstrap size heading with 1.25rem = 20px
h6 Bootstrap size heading with 1rem = 16px
<mark>This HTML tag element provides a yellow background color with some padding
<abbr>This HTML tag element provide a dotted border bottom.
<blockquote>The add class with <blockquote> is used for quoting blocks of content from source which are from outside.
.font-weight-boldFor Bold text
.font-italicFor Italic text
.font-weight-lightFor Light weight text
.font-weight-normalFor Normal text
.leadIt makes a paragraph visibly stand out
.smallIt Indicates smaller text i.e. it reduces font size to 85% of the size of its parent.
.text-leftIt Indicates that the text is to left-aligned.
.text-*-leftIt Indicates that the text is left-aligned on all size screens
.text-centerIt Indicates for center-aligned text
.text-*-centerIt Indicates center-aligned text on all size screens
.text-rightIt Indicates for right-aligned text
.text-*-rightIt Indicates right-aligned text on all size screens
.text-justifyIt Indicates for justified text
.text-monospaceIt has Monospaced text
.text-nowrapIt Indicates for no wrap text
.text-lowercaseIt Indicates for lowercased text
.text-uppercaseIt Indicates for uppercased text
.text-capitalizeIt Indicates for capitalized text
.initialismIt displays the text inside an HTML <abbr> tag element in a smaller sized font. It removes available default list-style and left margin on list items nested lists
.tableThe class adds basic styling to the table.
.table-stripedThe class adds zebra-stripes to the table.
.table-borderedThe class adds borders on all sides of a table and cells.
.table-hoverThe class adds a hover effect i.e. grey background color on available table rows.
 .table-darkThe class adds a black background to a table.

Free Tips and Tricks of using Bootstrap 4 Cheat sheet:-

Some cool tips and tricks to quickly hack the features of bootstrap 4 cheat sheet and create an amazing app on mobile are mentioned in this section: –

  • With the use. col-(breakpoint)-push-(number)or when using. col-(breakpoint)-pull-(number) classes to the columns, the sequence of the specified columns can be changed.
  • To quickly and easily hide an element from only on xs devices, there is a. hidden-xs class, this can be used to hide.
  • . hidden-(breakpoint) class can be used to the rest of the breakpoints too and when combined, hidden scope as mentioned above can be achieved. Ex: – classes .hidden-LG, .hidden-MD, .hidden-sm.
  • Bootstrap comes with 5 default available button styles these are the default, primary, success, and danger. When a button needs to be changed to decrease its border-radius or padding, the best way is to achieve this is to overwrite the .btn
  • To disable radios and checkboxes, one needs to add disabled class to a parent .checkboxor to.radio element. then add disabled attribute to the specific input
  • To disable buttons, add disabled attribute to the HTML tag <button> buttons

Or the same can be done via add .disabled class to <a> buttons.

  • To easily center a block element horizontally, adding a center-block class to it needs to be done, as in <div class=”center-block”></div>.
  • If quickly center inline content is to be achieved or inline-block elements inside a div are to be done, add .text-center class to its parent element.
  • One can also easily embed YouTube videos using Bootstrap’s embed-responsive class which is a helper, classes. embed-responsive-16by9 or embed-responsive-4by3 class needs to be chosen based on the video’s aspect ratio

Bootstrap 4 Cheat sheet – Conclusion

Above bootstrap 4 cheat sheet provides a glimpse of what is possible with the bootstrap 4. But there is a more comprehensive guide available with thousands of other parameters and tags. It is obvious that information regarding all cannot be provided in a single article either does a developer needs to remember all the tags and classes to do development. The best and most recommended approach is to keep such cheat sheets handy and the user should refer to such sheets whenever a need arises. This shall ensure all the job is done on the time of need and shall improve user’s understanding and knowledge of bootstrap 4 over a period.

Leave a Reply

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