Introduction to Bootstrap 4 Cheatsheet
Bootstrap 4 cheat sheet has incorporated a major overhaul from Bootstrap 3. A lot of changes have 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 the quality and consistency of the application across the site. Bootstrap 4 cheat sheet works on all modern browsers above internet explorer 9.
Bootstrap 4
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 free and open-source. We no longer need to re-write and re-design everything from ground zero for the different sets 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 Cheatsheet
Some important Bootstrap 4 commands and their description is provided below:
| Commands | Description |
| Fixed Container | A fixed container has a fixed width. As the browser is resized, its width remains same until it breakpoint is found. |
| Fluid Container | A 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-bold | For Bold text |
| .font-italic | For Italic text |
| .font-weight-light | For Light weight text |
| .font-weight-normal | For Normal text |
| .lead | It makes a paragraph visibly stand out |
| .small | It Indicates smaller text i.e. it reduces font size to 85% of the size of its parent. |
| .text-left | It Indicates that the text is to left-aligned. |
| .text-*-left | It Indicates that the text is left-aligned on all size screens |
| .text-center | It Indicates for center-aligned text |
| .text-*-center | It Indicates center-aligned text on all size screens |
| .text-right | It Indicates for right-aligned text |
| .text-*-right | It Indicates right-aligned text on all size screens |
| .text-justify | It Indicates for justified text |
| .text-monospace | It has Monospaced text |
| .text-nowrap | It Indicates for no wrap text |
| .text-lowercase | It Indicates for lowercased text |
| .text-uppercase | It Indicates for uppercased text |
| .text-capitalize | It Indicates for capitalized text |
| .initialism | It 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 |
| .table | The class adds basic styling to the table. |
| .table-striped | The class adds zebra-stripes to the table. |
| .table-bordered | The class adds borders on all sides of a table and cells. |
| .table-hover | The class adds a hover effect i.e. grey background color on available table rows. |
| .table-dark | The 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
Conclusion
Above bootstrap 4 cheat sheet provides a glimpse of what is possible with 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 the user’s understanding and knowledge of bootstrap 4 over a period.