write code
run code
CANVASOR
<!DOCTYPE html> <html lang="en"> <head> <!-- Specifies the character encoding for the HTML document --> <meta charset="utf-8"> <!-- Ensures proper rendering and touch zooming on mobile devices --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Links to the Bootstrap CSS for responsive design and styling --> <link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Additional CSS for Bootstrap documentation styling (optional) --> <link href="https://getbootstrap.com/docs/4.0/assets/css/docs.min.css" rel="stylesheet"> <!-- Page title --> <title>Lesson 2 Bootstrap Alerts</title> </head> <body> <!-- Defines a header section with a navigation bar --> <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar" style="background-color:#CCC"> <!-- Brand/logo for the website --> <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="">LOGO</a> <!-- Placeholder for additional navigation elements --> <div class="navbar-nav-scroll">.</div> <!-- Placeholder for right-aligned navigation items --> <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">.</ul> </header> <!-- Main container for the layout --> <div class="container-fluid"> <!-- Defines a row with columns that adjust responsively --> <div class="row flex-xl-nowrap"> <!-- Sidebar section for navigation links (left panel) --> <div class="col-12 col-md-3 col-xl-2 bd-sidebar"> <nav class="collapse bd-links" id="bd-docs-nav">.</nav> </div> <!-- Table of contents (optional, hidden on smaller screens) --> <div class="d-none d-xl-block col-xl-2 bd-toc">.</div> <!-- Main content area --> <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main"> <!-- Page title --> <h1 class="bd-title" id="content">Lesson 2 Bootstrap Alerts</h1> <!-- Secondary title --> <h1 class="bd-title" id="content">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</h1> <!-- Example container --> <div class="bd-example"> <div class="alert alert-primary" role="alert"> This is a primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> This is a secondary alert—check it out! </div> <div class="alert alert-success" role="alert"> This is a success alert—check it out! </div> <div class="alert alert-danger" role="alert"> This is a danger alert—check it out! </div> <div class="alert alert-warning" role="alert"> This is a warning alert—check it out! </div> <div class="alert alert-info" role="alert"> This is a info alert—check it out! </div> <div class="alert alert-light" role="alert"> This is a light alert—check it out! </div> <div class="alert alert-dark" role="alert"> This is a dark alert—check it out! </div> </div> </main> </div> </div> <!-- Include JavaScript libraries for Bootstrap functionality --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/jquery-slim.min.js"></script> <script src="https://getbootstrap.com/docs/4.0/assets/js/vendor/popper.min.js"></script> <script src="https://getbootstrap.com/docs/4.0/dist/js/bootstrap.min.js"></script> <script src="https://getbootstrap.com/docs/4.0/assets/js/docs.min.js"></script> </body> </html>
About THIS CODE (CANVASOR.NET):
81
Copy All Code
Download Code.html