Bootstrap 4 Tutorial: Learn Responsive Web Design

Rumman Ansari   Software Engineer   2024-07-05 05:22:39   8173  Share
Subject Syllabus DetailsSubject Details
☰ TContent
☰Fullscreen

Table of Content:

Bootstrap

Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Prerequisites for this Tutorial

Before proceeding with this tutorial, you should have a basic understanding of Computer Programming terminologies. A basic understanding of any of HTML will help you in understanding the Bootstrap concepts and move fast on the learning track, also you should have a basic understanding of text editor and web browser.

Target Audience

  • Students who are pursuing BCA, MCA, B.E/B.Tech (CS/IT/EC/EE/ME/Civil/Any other discipline)
  • Students who have "Bootstrap" in their curriculum
  • Candidates who wish to switch from service-based companies to product based
  • Candidates who want to continue their career as a web developer
  • Candidates who are passionate about coding

Bootstrap CDN

When you only need to include Bootstrap's compiled CSS or JS, you can use BootstrapCDN.

CSS only

 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

JS, Popper.js, and jQuery

 
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>