I got the style of my breadcrumb here bootstrapmade.com

however, the problem in my code is that the navigation is directly beneath the heading instead of being on the same line, how can I achieve this?

here's the css

.breadcrumbs {
padding: 15px 0;
background: #2b2320;
min-height: 40px;
}

.breadcrumbs h2 {
    font-size: 28px;
    font-weight: 300;
    color: #fff;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    color: #ded5d2;
}

.breadcrumbs ol a {
    color: #fe825a;
}

.breadcrumbs ol li li {
    padding-left: 10px;
}

.breadcrumbs ol li li::before {
    display: inline-block;
    padding-right: 10px;
    color: #c8bab5;
    content: "/";
}

@media (max-width: 768px) {
    .breadcrumbs .d-flex {
        display: block !important;
    }

    .breadcrumbs ol {
        display: block;
    }

    .breadcrumbs ol li {
        display: inline-block;
    }
}

here's the html

<section id="breadcrumbs" >
        <div >
            <div >
                <h2>Apply</h2>
                <ol>
                    <li><a href="/">Home</a></li>
                    <li><a href="/Careers">Careers</a></li>
                    <li>Apply</li>
                </ol>
            </div>
        </div>
    </section>

Please Help i tried changing align-items-center to align-items-baseline and it didnt help, I also tried wrapping the h2 and ol in a div with class row, it also didnt work. in css I tried flex-direction row and it also didnt work

CodePudding user response：

There is nothing wrong with your code. you are not include "Bootstrap 5" CDN. that's why "Breadcrumb" not show in one line.
Note : Output show in Full Screen

.breadcrumbs {
  padding: 15px 0;
  background: #2b2320;
  min-height: 40px;
}

.breadcrumbs h2 {
    font-size: 28px;
    font-weight: 300;
    color: #fff;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    color: #ded5d2;
}

.breadcrumbs ol a {
    color: #fe825a;
}

.breadcrumbs ol li li {
    padding-left: 10px;
}

.breadcrumbs ol li li::before {
    display: inline-block;
    padding-right: 10px;
    color: #c8bab5;
    content: "/";
}

@media (max-width: 768px) {
    .breadcrumbs .d-flex {
        display: block !important;
    }

    .breadcrumbs ol {
        display: block;
    }

    .breadcrumbs ol li {
        display: inline-block;
    }
}

<!-- BootStrap 5 CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>



<section id="breadcrumbs" >
      <div >
          <div >
              <h2>Apply</h2>
              <ol>
                  <li><a href="/">Home</a></li>
                  <li><a href="/Careers">Careers</a></li>
                  <li>Apply</li>
              </ol>
          </div>
      </div>
</section>

CodePudding user response：

To style your breadcrumb to fit in one line, you can try the following:

1.Set a maximum width for the breadcrumb container and make it display as an inline-block element so that it will only take up the space it needs.

.breadcrumb-container {
  display: inline-block;
  max-width: 600px;
}

2.Use the white-space property with the value of nowrap to prevent the breadcrumb items from wrapping onto a new line.

.breadcrumb-item {
  white-space: nowrap;
}

3.Use the overflow property with the value of hidden to hide any breadcrumb items that would overflow the container.

.breadcrumb-container {
  overflow: hidden;
}

4.Use the text-overflow property with the value of ellipsis to add an ellipsis (...) to the end of any breadcrumb items that are too long to be displayed in full.

.breadcrumb-item {
  text-overflow: ellipsis;
}

You can adjust the values and styles used in these examples to fit your specific needs and design.

CodePudding user response：

I think you need to missed bootstrap cdn in your code that is why Breadcrumb is not in one line

Stylesheet CDN :

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Scriptisheet CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Including this cdn script linking in your html file will fix your problem.

Add the StyleSheet CDN inside <head></head>

Add the ScriptSheet CDN at the end of <body></body>