BOOTSTRAP 4 Tips and Tricks

Hello Guys today i am sharing some tips and tricks for bootstrap 4, which has helped me to improve my code and reduce the time taken to type long codes by hand.This post is for all beginner and for those who already know about bootstrap

Lets get started...

What is Bootstrap?
Bootstrap is a free front-end framework for faster and easier web development.

Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.

Bootstrap also gives you the ability to easily create responsive designs

Example -

<h1 class='bg-dark text-white text-center'>
    This is a heading with bootstrap styling
 </h1>

We can use bootstrap styling with class attribute

bg-dark class give a dark blackish background to the heading
text-white class will make the text white in color
text-center will center the text.(like text-align:center in css).

OUTPUT -

You can read the documentation of bootstrap here -
https://getbootstrap.com/docs/4.0/getting-started/introduction/

CHEATSHEET -

For those who knows about bootstrap already and wants a cheetsheat check this one -

I love this one because it shows the code snippet of the component and also preview the effect of that snippet
you can just copy the code from the snippet and paste it in the code.

TIPS -

Well its just a basic one and you might already knew it but still i am mentioning it for those who just started bootstrap

TIP - install the BOOTSRAP 4 extension in VSCODE

It generates snippet of bootstrap code by just writing the class name of the code you want to use in bootstrap

Example -
Type "b4-card-default" and press "Enter", it will create the code of a bootstrap card and saves your time of typing the whole code for creating a bootstrap card!!.

Special tip for React JS developers -

Use React-strap it is same as bootstrap but in the form of react components and its more easy to use then actual bootstrap.

Installation -