Why breadcrumb is used in Bootstrap?

1.	Why breadcrumb is used in Bootstrap?
Answer» Breadcrumbs display hierarchy-based information and the current page location. On a website, breadcrumbs display categories, and tags and help users in navigation and letting them know where they have reached. Bootstrap has the concept of Breadcrumbs with a class .breadcrumb. The separator for Breadcrumb is added by bootstrap.min.css: .breadcrumb &GT; li + li:before { color: #CCCCCC; content: "/ "; padding: 0 5px; } Let us now SEE an EXAMPLE in Bootstrap to ADD Breadcrumbs: &LT;!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Tutorials</a></li> <li class="breadcrumb-item active" aria-current="page">Java</li> </ol> </nav> </body> </html> The above code displays the following breadcrumb navigation:

Answer»

Breadcrumbs display hierarchy-based information and the current page location. On a website, breadcrumbs display categories, and tags and help users in navigation and letting them know where they have reached.

Bootstrap has the concept of Breadcrumbs with a class .breadcrumb. The separator for Breadcrumb is added by bootstrap.min.css:

.breadcrumb &GT; li + li:before { color: #CCCCCC; content: "/ "; padding: 0 5px; }

Let us now SEE an EXAMPLE in Bootstrap to ADD Breadcrumbs:

&LT;!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Tutorials</a></li> <li class="breadcrumb-item active" aria-current="page">Java</li> </ol> </nav> </body> </html>

The above code displays the following breadcrumb navigation:

Why breadcrumb is used in Bootstrap?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment