Next »

Introduction to Bootstrap


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

What is Responsive Web Design?

  • Responsive Web Design is a technique used to build websites that automatically adapt to different screen sizes — from small mobile screens to large desktop monitors — ensuring they look good and function properly on all devices.

Bootstrap Versions

  • Bootstrap 5: launched in 2021, is the latest update to the Bootstrap framework (originally introduced in 2013). It brings fresh components, improved performance in stylesheets, and enhanced responsiveness for various devices.
  • This version is compatible with the most recent and stable versions of all major browsers and platforms — but it no longer supports Internet Explorer 11 or earlier.
  • One of the biggest changes in Bootstrap 5 compared to versions 3 and 4 is the removal of jQuery. It now relies entirely on vanilla JavaScript for its interactive features

Why Use Bootstrap?

Advantages of Bootstrap:

  • User-Friendly: Even users with a basic understanding of HTML and CSS can quickly get started with Bootstrap.
  • Responsive Design: Bootstrap's layout system automatically adjusts for different screen sizes like mobile devices, tablets, and desktops.
  • Mobile-First Philosophy: Bootstrap is built with a mobile-first design strategy, meaning styles are optimized for small screens first.
  • Cross-Browser Support: Bootstrap 5 works smoothly on all major modern browsers such as Chrome, Firefox, Safari, Edge, and Opera. For older browsers like Internet Explorer 11 or earlier, consider using Bootstrap 4 or 3.

MaxCDN:

<-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"rel="stylesheet">


<--  Latest compiled JavaScript  -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"</script>

Build Your First Web Page Using Bootstrap


1. Add the HTML5 doctype

    Bootstrap 5 relies on HTML elements and CSS features that work correctly only when the HTML5 doctype is declared.

    Always start your web page with the HTML5 doctype, and make sure to include the lang attribute, a proper page title, and the correct character encoding.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> Bootstrap 5 Example </title>
  </head>
</html>
Next »