Bootstrap Introduction - 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.

Create a new index.html

how-to-create-html-page

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world! </h1>
  </body>
</html>

Output

create-html-page

Include Bootstrap’s CSS and JS

  • Another way to include Bootstrap's CSS and JS in your web page is to use a CDN (Content Delivery Network), which allows you to link to the files hosted on a third-party server. This method can be faster and easier than downloading and hosting the files yourself.
  • To use a CDN for Bootstrap, add the following code to the <head> section of your HTML document:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" 
    crossorigin="anonymous">
  • And add the following code at the end of the <body> section of your HTML document:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" 
    crossorigin="anonymous"></script>
  • Note that when using a CDN, you don't need to download or host the files. Instead, your web page will load the files from the CDN server.
bootstrap-link-and-script

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css
    /bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>  
  </body>
</html>

Output

bootstrap-link-and-script

Bootstrap 5

  • Bootstrap 5 uses HTML elements and CSS properties that require the HTML5 doctype.
bootstrap-5

Sample Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 Example</title>
    <meta charset="utf-8">
  </head>
</html>

Output

bootstrap-5

Related Searches to Bootstrap Introduction - Introduction to Bootstrap