WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap 4 - Breadcrumb


Add breadcrumbs with the aid of including a single class name.Bootstrap affords the .Breadcrumb class which patterns a listing into a breadcrumb. Bootstrap provides separators (via the usage of :earlier than and content) to the list in addition to display: inline-block to the li element — ensuing in that "breadcrumb" effect.

Example

<html lang = "en">
    <head>
        <!-- Meta tags -->
        <meta charset = "utf-8">
        <meta call = "viewport" content = "width = tool-width, preliminary-scale = 1, decrease-to-in shape = no">

        <!-- Bootstrap CSS -->
        <hyperlink rel = "stylesheet"
            href = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.Three/css/bootstrap.Min.Css"
            integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
            crossorigin = "nameless">

        <title>Bootstrap 4 Example</name>
    </head>

    <body>
        <div elegance = "box">
            <h2>Breadcrumb</h2>
            <nav aria-label = "breadcrumb">
                <!--Add the "breadcrumb" elegance to ul detail that represents the breadcrumb-->
                <ul magnificence = "breadcrumb">
                    <!--Add the ".Breadcrumb-object" magnificence to each li element within the breadcrumb-->
                    <li magnificence = "breadcrumb-object"><a href = "#">Home</a></li>
                    <li magnificence = "breadcrumb-object"><a href="#">Tutorials Library</a></li>
                    <!--Add the "lively" magnificence to li element to symbolize the cutting-edge page-->
                    <li magnificence = "breadcrumb-object energetic" aria-modern = "web page">Bootstrap 4</li>
                </ul>
            </nav>
        </div>

        <!-- jQuery first, then Popper.Js, then Bootstrap JS -->
        <script src = "https://code.Jquery.Com/jquery-3.Three.1.Slim.Min.Js"
            integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin = "anonymous">
        </script>

        <script src = "https://cdnjs.Cloudflare.Com/ajax/libs/popper.Js/1.14.3/umd/popper.Min.Js"
            integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin = "anonymous">
        </script>

        <script src = "https://stackpath.Bootstrapcdn.Com/bootstrap/four.1.3/js/bootstrap.Min.Js"
            integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
            crossorigin = "anonymous">
        </script>

    </frame>
</html>

It will produce the following result −

Output