Full-Stack freelance Umbraco developer in the UK.

George Phillipson - Freelance Umbraco developer

Breadcrumbs break into 2 lines

Breadcrumbs on 2 lines
<!doctype html>
<meta charset="utf-8">
<title>Untitled Document</title>
  <link href="css/bootstrapv4.1.3.css" rel="stylesheet" type="text/css"> 
    <link href="css/style.css" rel="stylesheet" type="text/css"> 

     <nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Next Level</a></li>
    <li class="breadcrumb-item active" aria-current="page"><a href="/" title="Im a really long name and will break">Im a really long name and will break</a></li>
	<h1>Example for keeping breadcrumbs on same line</h1>
    <script src="js/jQueryv3.3.1.js" type="text/javascript"></script>
    <script src="js/bootstrapv4.1.3.js" type="text/javascript"></script>
/* CSS Document */
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  h1 {
    font-size: 0.9em;
    text-align: center; }

  .breadcrumb {
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }

  .breadcrumb .breadcrumb-item {
    display: inline; } }

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  h1 {
    font-size: 1.1em;
    text-align: left; } }
Breadcrumbs fixed

Comments Page 1 of 1 (1 Post)

i am just started my profession in web designing and made a website own. thus article is really helpful for my work and adding breadcrumbs . thnx for the css screenshots and running the progrm .http://chennaiwebs.com/seo-services-in-chennai.html also one of my references for my webdesigning

Comment posted by jills mikh on 18 Nov 2018 04:23

Thanks jills mikh,

Pleased you found it helpful


Please enter your comment.