Introduction

What can we build with Bootstrap?

Using Bootstrap

Thank you!

End

Bootstrap For Beginners 2020

Introduction

Bootstrap is a CSS framework to design mobile-friendly websites. Bootstrap uses classes to style elements and makes it effortless for web designers to make the web pages responsive with less custom styling. There are various other frameworks similar to bootstrap such as Materialize, Foundation, Skeleton etc. Bootstrap is beginner friendly and easy to get started.

Documentation : https://getbootstrap.com/docs/4.5/getting-started/introduction/

Stable Version : 4.5.0

 

What can we build with Bootstrap?

With Bootstrap we can make responsive navigation(navbar), buttons, dropdowns, menus, carousels, navs, alerts, modals, forms, breadcrumbs, cards, pagination, etc

 

Using Bootstrap

We can use bootstrap either by linking CDN or by downloading it.

Using Bootstrap CDN,

CSS

Styling the web page with bootstrap requires the bootstrap CSS file, the below one is a minified version of bootstrap CSS.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

JS

Most of the Bootstrap functionalities require JavaScript, especially jQuery, Popper.js and bootstrap.js. These script tags can be placed inside the head section tag or at the end of body tag according to your preference, placing them in the body can help the website to load fast.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

We will be applying bootstrap in the upcoming articles, stay tuned!

 

Thank you!

I hope this article was helpful to you, do share it with your friends.

Tags