Bootstrap

Basic Page

Bootstrap

Learn the basic building blocks

Here's an example of how you can create a basic Bootstrap page:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Bootstrap Page</title>

<!-- Link to Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
<h1>Welcome to My Bootstrap Page</h1>
<p>This is a simple page created using Bootstrap.</p>
</div>

<!-- Bootstrap JS and dependencies -->

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

In the example above:

  • The title of the page is set as "Basic Bootstrap Page".
  • The Bootstrap CSS and JS files are linked to ensure the page has the Bootstrap styling and interactivity.
Basic Page Button alignment Button styles Button with icon Only Button with text and icon on the left Button with text and icon on the right Content pagination Include CSS and JS Files Modal window Popover Popover with HTML content Progress bars Progress bars with tooltip Popover with HTML content and a close button Responsive cards Responsive cards styled like business cards Responsive cards styled like post-it notes Responsive columns Table Table pagination with keyboard keys Tabs Tooltip Tooltip with HTML content