What is Importing Bootstrap in projects?

Bootsrapmarkup~5 mins

Importing Bootstrap in projects

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Bootstrap helps you quickly style your website with ready-made designs. Importing it lets you use these styles easily.

You want to make your website look nice without writing all CSS from scratch.

You need buttons, forms, or layouts that work well on phones and computers.

You want to save time by using a popular style library.

You want your site to look good on different screen sizes automatically.

Syntax

Bootsrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-..." crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-..." crossorigin="anonymous"></script>

Use the <link> tag inside the <head> to add Bootstrap CSS.

Add the <script> tag before the closing </body> to add Bootstrap JavaScript features.

Examples

This adds only the Bootstrap styles to your page.

Bootsrap

<!-- Add Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

This adds styles and interactive features like dropdowns or modals.

Bootsrap

<!-- Add Bootstrap CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

This is for projects using build tools like Webpack or Vite.

Bootsrap

<!-- Use Bootstrap from npm in a project -->
// In your JavaScript or build setup
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Sample Program

This example shows how to add Bootstrap CSS and JS from a CDN. You see a styled heading and a green button.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Import Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUa6mY5h2v+6U6z+6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6" crossorigin="anonymous">
</head>
<body>
  <div class="container mt-5">
    <h1 class="text-primary">Hello, Bootstrap!</h1>
    <button type="button" class="btn btn-success">Click Me</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoY9FZ9+6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6" crossorigin="anonymous"></script>
</body>
</html>

OutputSuccess

Important Notes

Always add the CSS link in the <head> so styles load before the page shows.

Put the JavaScript <script> tag just before </body> for faster page loading.

Use the official Bootstrap CDN links to get the latest stable version.

Summary

Import Bootstrap CSS with a <link> tag in the <head>.

Add Bootstrap JavaScript with a <script> tag before the closing </body>.

Using Bootstrap helps you build nice, responsive websites quickly.