Bootstrap 5 Example

Bootstrap 5 has a basic format for creating web pages. This web page provides fixed and responsive applications for all devices. We can see the following steps in the basic format of the example.

HTML File: create html file in required IDE. This page creates web applications. For example, index.html.
Add the HTML 5 doctype: Because Bootstrap version 5 relies on HTML elements and CSS attributes, you must include the HTML 5 doctype at the top of the page, along with the lang property and the right character set.

<!DOCTYPE html>    
<html lang = "en">    
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = windows-1252">  
<title> Bootstrap 5 example title </title>    
</head>    
<body>    
Write bootstrap 5 code!    
</body>    
</html>

Bootstrap is mobile-friendly: Bootstrap 5 is designed to be mobile-responsive.

Bootstrap's core foundation includes mobile-first styling.

For appropriate rendering and touch zooming, you must include the following <meta> tag within the <head> element:

The "width=device-width" section is used to set the width of the page to match the device's screen width (vary according to the device).

When the browser first loads the page, the initial-scale=1 component is utilized to set the initial zoom level.

Apply bootstrap 5 links: the bootstrap 5 can download files from official websites or use online links. The following links use in the head section of the html page.

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

Use container: the bootstrap 5 uses container or container-fluid class in the <div> tag.
A container is used to enclose the contents of a website. The .container class provides a responsive or fixed-width container.

Use bootstrap 5 functions: bootstrap 5 use row and column in the container to place functions. We can contains navbar, content, table, forms and other functions in container using grid system. We can use other classes and CSS styles on the web page.

Example

The following example shows the basic container, columns, and row of the bootstrap 5version. We can see the links and other related tags to create a basic web page.

Here, we use a container with light background with heading and paragraph elements. This container contains the content of the page.

index.html

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container bg-light"style="border : 1px solid black;">
<h1> First Bootstrap 5 example </h1>
<p> The bootstrap 5 uses container class in div tag.</p>
<p> The container uses contextual background </p>
<b>
Resize the browser window to set the container width at different breakpoints.
</b>
</div>
</div>
</body>
</html>

Output:

The following image shows the output of the bootstrap 5 examples.

Conclusion

Bootstrap 5 example shows us how to create a bootstrap web page. This example creates a user-friendly, attractive, and easy web application. It helps to put bootstrap 5 links and the basic syntax of the code.

Next TopicDifference between Bootstrap4 and Bootstrap5 Framework

← prev next →