Bootstrap 5 es el último lanzamiento importante de Bootstrap en el que renovaron la interfaz de usuario y realizaron varios cambios. Las migas de pan se utilizan para indicar la ubicación de la página actual dentro de una jerarquía de navegación.
Sintaxis:
<ol class="breadcrumb"> <li class="breadcrumb-item"> Content .. </li> </ol>
Ejemplo 1: Este ejemplo muestra el funcionamiento de Breadcrumbs en Bootstrap 5.
HTML
<!DOCTYPE html> <html> <head> <title> Bootstrap 5 | Breadcrumbs </title> <!-- Load Bootstrap --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> </head> <body> <div style="text-align: center;width: 600px;"> <h1 style="color: green;"> GeeksforGeeks </h1> </div> <div style="width: 600px;height: 200px; margin:20px;"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item active"> GeeksforGeeks </li> </ol> </nav> </div> </body> </html>
Producción:
Example 2: This example uses show the working of Breadcrumbs in Bootstrap 5.
HTML
<!DOCTYPE html> <html> <head> <title> Bootstrap 5 | Breadcrumbs </title> <!-- Load Bootstrap --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> </head> <body> <div style="text-align: center;width: 600px;"> <h1 style="color: green;"> GeeksforGeeks </h1> </div> <div style="width: 600px;height: 200px;margin:20px;"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#"> GeeksforGeeks </a> </li> <li class="breadcrumb-item"> Articles </li> </ol> </nav> </div> </body> </html>
Producción:
Example 3: This example uses show the working of Breadcrumbs in Bootstrap 5.
HTML
<!DOCTYPE html> <html> <head> <title> Bootstrap 5 | Breadcrumbs </title> <!-- Load Bootstrap --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> </head> <body> <div style="text-align: center;width: 600px;"> <h1 style="color: green;"> GeeksforGeeks </h1> </div> <div style="width: 600px;height: 200px;margin:20px;"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#">GeeksforGeeks</a> </li> <li class="breadcrumb-item"> <a href="#">Articles</a> </li> <li class="breadcrumb-item active"> Bootstrap 5 </li> </ol> </nav> </div> </body> </html>
Producción:
