breadcrumbssmartphone

Bootstrap Breadcrumb line return responsive


I've this breadcrumb

Home > News > Long title of the news that goes on other line

<nav aria-label="Fil d'ariane" class="breadcrumb">
    <ol>
        <li>
            <a class="mdi mdi-home" href="https://google" id="ariane_n1">Google</a>
        </li>
        <li>
            <a href="https://google/news">News</a>
        </li>
        <li>
            <a href="https://google/news/7357"><span aria-current="page" class="ariane_courant">Long title of the news that goes on other line</span></a>
        </li>
    </ol>
</nav>

With this css

.breadcrumb {
    background-color: white;
    border-radius: unset;
    margin: .3rem 0 .5rem 0;
    padding: 0;
    display: flex; <== bootstrap
    flex-wrap: wrap; <== bootstrap
    list-style: none; <== bootstrap
}
.breadcrumb ol {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb li::before {
    content: "›";
    padding: 0px 0px 0px 0.25rem;
}
.breadcrumb li:first-child::before {
    content: "";
}

On small screen like smartphone, the breadcrumb is displayed like :
Home > News
> Long title of the news that goes on other line

I would like it is displayed on full width, with a line return at the end of the screen :
Home > News > Long title of the
news that goes on other line


Solution

  • I got rid of using flex on the ol, made the li elements be inline and tweaked the padding.

    .breadcrumb {
        background-color: white;
        border-radius: unset;
        margin: .3rem 0 .5rem 0;
        padding: 0;
        display: flex; <== bootstrap
        flex-wrap: wrap; <== bootstrap
        list-style: none; <== bootstrap
    }
    .breadcrumb ol {
        list-style: none;
        margin: 0;
        padding: 0 0 0 0.25rem;
    }
    .breadcrumb li {
        display: inline;
    }
    .breadcrumb li + li::before {
        content: "›";
    }
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <title>About | </title>
    
    <!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->
    
    <!-- <link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" /> -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- <link rel="stylesheet" href="/css/index.css" /> -->
    <link rel="stylesheet" href="./css/about.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- <script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script> -->
    
        
    </head>
    <body style="width:300px">
            
        <nav aria-label="Fil d'ariane" class="breadcrumb">
        <ol>
            <li>
                <a class="mdi mdi-home" href="https://google" id="ariane_n1">Google</a>
            </li>
            <li>
                <a href="https://google/news">News</a>
            </li>
            <li>
                <a href="https://google/news/7357"><span aria-current="page" class="ariane_courant">Long title of the news that goes on other line</span></a>
            </li>
        </ol>
    </nav>
    </html>