Bootstrap Integration Techniques

Bootstrap can be integrated into our project either through CDN links or by using package managers like npm.

Method 1: Using Bootstrap 5 CDN

You can import Bootstrap 5 from a CDN (Content Delivery Network). You can get CDN support for Bootstrap’s CSS and JavaScript.

<!-- Compiled CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

Method 2: Using Bootstrap 5 NPM

You can also get Bootstrap 5 via NPM(Node Package Manager).

npm install bootstrap

Example 2: Here is an example to illustrate Bootstrap 5 styling including, colors, text-color, and buttons.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Bootstrap 5 | Buttons
    </title>
    <!-- Load Bootstrap -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" 
          crossorigin="anonymous">
</head>

<body>
    <div style="text-align: center;width: 600px;"></div>
    <div style="width: 600px; height: 200px;
                margin:20px;text-align: center;">
        <button type="button" class="btn btn-primary">
            Primary
        </button>
        <button type="button" class="btn btn-secondary">
            Secondary
        </button>
        <button type="button" class="btn btn-success">
            Success
        </button>
        <button type="button" class="btn btn-danger">
            Danger
        </button>
        <button type="button" class="btn btn-warning">
            Warning
        </button>
    </div>
</body>

</html>

Output:

Output

What is Bootstrap ?

Bootstrap is one of the popular front-end frameworks which has a nice set of predefined CSS codes. The updated version of Bootstrap5 was officially released on 16 June 2020. Bootstrap is a CSS framework that makes mobile-friendly web development and provides responsiveness.

The framework is available for free and can be utilized in two ways either by downloading the zip files and incorporating Bootstrap libraries/modules into the project or by directly including the Bootstrap URL and using the online version.

Tags:

#Bootstrap-Questions #Bootstrap #Web Technologies

Bootstrap Components

Advantages and Disadvantages

Bootstrap Integration Techniques

What is Bootstrap ?

Similar Reads

Contact Us