Bootstrap Breadcrumb line return responsive

Question

Bootstrap Breadcrumb line return responsive

62 views Asked by user16761658 At 24 August 2023 at 15:29

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

Original Q&A

There are 1 answers

**scrhartley** · Accepted Answer · 2023-08-24T16:40:37+00:00

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/[email protected]/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/[email protected]/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/[email protected]/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>

TechQA.

Bootstrap Breadcrumb line return responsive

There are 1 answers

Related Questions in BREADCRUMBS

Related Questions in SMARTPHONE

Popular Questions

Popular Tags

Trending Questions