Boostrap menu items show separately in vertical list

I have bootstrap code which is not showing the desired result. The menu items shows separately at the upper right corner of web page whereas they should be in the horizontal strip (like a tab structure). What is wrong with code?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>



<nav class = "navbar navbar-default">

  <div class = "container-fluid">

    <div class="navbar-header">

      <a href = "#" class = "navbar-brand">CMS System </a>

    </div>



    <ul class="nav navbar-nav">

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

    </ul>





  </div>

</nav>

edited Jan 19 at 14:29

DaFois

2,02141419

asked Jan 19 at 14:06

Sumaira Samar

167

like a tab structure

– DILEEP THOMAS
Jan 19 at 14:12

yes like a tab structure. horizontal items on strip

– Sumaira Samar
Jan 19 at 14:12

so to the page right side you need the tabs

– DILEEP THOMAS
Jan 19 at 14:13

add a comment |

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>



<nav class = "navbar navbar-default">

  <div class = "container-fluid">

    <div class="navbar-header">

      <a href = "#" class = "navbar-brand">CMS System </a>

    </div>



    <ul class="nav navbar-nav">

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

    </ul>





  </div>

</nav>

edited Jan 19 at 14:29

DaFois

2,02141419

asked Jan 19 at 14:06

Sumaira Samar

167

like a tab structure

– DILEEP THOMAS
Jan 19 at 14:12

yes like a tab structure. horizontal items on strip

– Sumaira Samar
Jan 19 at 14:12

so to the page right side you need the tabs

– DILEEP THOMAS
Jan 19 at 14:13

add a comment |

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>



<nav class = "navbar navbar-default">

  <div class = "container-fluid">

    <div class="navbar-header">

      <a href = "#" class = "navbar-brand">CMS System </a>

    </div>



    <ul class="nav navbar-nav">

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

    </ul>





  </div>

</nav>

edited Jan 19 at 14:29

DaFois

2,02141419

asked Jan 19 at 14:06

Sumaira Samar

167

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>



<nav class = "navbar navbar-default">

  <div class = "container-fluid">

    <div class="navbar-header">

      <a href = "#" class = "navbar-brand">CMS System </a>

    </div>



    <ul class="nav navbar-nav">

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

    </ul>





  </div>

</nav>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>



<nav class = "navbar navbar-default">

  <div class = "container-fluid">

    <div class="navbar-header">

      <a href = "#" class = "navbar-brand">CMS System </a>

    </div>



    <ul class="nav navbar-nav">

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

    </ul>





  </div>

</nav>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>



<nav class = "navbar navbar-default">

  <div class = "container-fluid">

    <div class="navbar-header">

      <a href = "#" class = "navbar-brand">CMS System </a>

    </div>



    <ul class="nav navbar-nav">

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

      <li><a href="#">Home</a></li>

    </ul>





  </div>

</nav>

bootstrap-4

edited Jan 19 at 14:29

DaFois

2,02141419

asked Jan 19 at 14:06

Sumaira Samar

167

edited Jan 19 at 14:29

DaFois

2,02141419

asked Jan 19 at 14:06

Sumaira Samar

167

edited Jan 19 at 14:29

DaFois

2,02141419

edited Jan 19 at 14:29

DaFois

2,02141419

edited Jan 19 at 14:29

DaFois

2,02141419

asked Jan 19 at 14:06

Sumaira Samar

167

asked Jan 19 at 14:06

Sumaira Samar

167

asked Jan 19 at 14:06

Sumaira Samar

167

like a tab structure

– DILEEP THOMAS
Jan 19 at 14:12

yes like a tab structure. horizontal items on strip

– Sumaira Samar
Jan 19 at 14:12

so to the page right side you need the tabs

– DILEEP THOMAS
Jan 19 at 14:13

add a comment |

like a tab structure

– DILEEP THOMAS
Jan 19 at 14:12

yes like a tab structure. horizontal items on strip

– Sumaira Samar
Jan 19 at 14:12

so to the page right side you need the tabs

– DILEEP THOMAS
Jan 19 at 14:13

like a tab structure

– DILEEP THOMAS
Jan 19 at 14:12

yes like a tab structure. horizontal items on strip

– Sumaira Samar
Jan 19 at 14:12

so to the page right side you need the tabs

– DILEEP THOMAS
Jan 19 at 14:13

add a comment |

3 Answers
3

active

oldest

votes

You have to add some extra bit of style. May be there is an issue with the version of the bootstrap css you have used as well.

.navbar .container-fluid>.navbar-header {

  float: left;

  margin-right: 10px;

}

.navbar .navbar-nav {

  float: left;

  margin: 5px;

}

.nav>li {

  float: left;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>



<body>

    <nav class = "navbar navbar-default">

        <div class = "container-fluid">

            <div class="navbar-header">

                <a href = "#" class = "navbar-brand">CMS System </a>

            </div>

            <ul class="nav navbar-nav">

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

            </ul>

        </div>

    </nav>

</body>

edited Jan 21 at 3:47

answered Jan 19 at 14:20

Mamun

26.6k71630

I copied your code, it worked without including the custom css you provided.

– Sumaira Samar
Jan 19 at 14:32

@SumairaSamar, that's really grate to know:)

– Mamun
Jan 19 at 14:36

add a comment |

You could change

<nav class = "navbar navbar-default">

<nav class = "navbar navbar-expand">

making the navbar horizontal

answered Jan 19 at 14:24

Rob

4625

add a comment |

using latest version of bootstrap no need of css, you can check the below solution.

I hope this will solve the issue.

Note: Added some css extra classes for styling the background of navigations

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">

        <span class="navbar-toggler-icon"></span>

    </button>

  <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">

    <ul class="navbar-nav text-right">

      <li class="nav-item active">

        <a class="nav-link" href="#">News</a>

      </li>

      <li class="nav-item active">

        <a class="nav-link" href="#">Products</a>

      </li>

    </ul>

  </div>

</nav>

answered Jan 19 at 14:35

DILEEP THOMAS

9831514

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54267914%2fboostrap-menu-items-show-separately-in-vertical-list%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

You have to add some extra bit of style. May be there is an issue with the version of the bootstrap css you have used as well.

.navbar .container-fluid>.navbar-header {

  float: left;

  margin-right: 10px;

}

.navbar .navbar-nav {

  float: left;

  margin: 5px;

}

.nav>li {

  float: left;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>



<body>

    <nav class = "navbar navbar-default">

        <div class = "container-fluid">

            <div class="navbar-header">

                <a href = "#" class = "navbar-brand">CMS System </a>

            </div>

            <ul class="nav navbar-nav">

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

            </ul>

        </div>

    </nav>

</body>

edited Jan 21 at 3:47

answered Jan 19 at 14:20

Mamun

26.6k71630

I copied your code, it worked without including the custom css you provided.

– Sumaira Samar
Jan 19 at 14:32

@SumairaSamar, that's really grate to know:)

– Mamun
Jan 19 at 14:36

add a comment |

You have to add some extra bit of style. May be there is an issue with the version of the bootstrap css you have used as well.

.navbar .container-fluid>.navbar-header {

  float: left;

  margin-right: 10px;

}

.navbar .navbar-nav {

  float: left;

  margin: 5px;

}

.nav>li {

  float: left;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>



<body>

    <nav class = "navbar navbar-default">

        <div class = "container-fluid">

            <div class="navbar-header">

                <a href = "#" class = "navbar-brand">CMS System </a>

            </div>

            <ul class="nav navbar-nav">

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

            </ul>

        </div>

    </nav>

</body>

edited Jan 21 at 3:47

answered Jan 19 at 14:20

Mamun

26.6k71630

I copied your code, it worked without including the custom css you provided.

– Sumaira Samar
Jan 19 at 14:32

@SumairaSamar, that's really grate to know:)

– Mamun
Jan 19 at 14:36

add a comment |

You have to add some extra bit of style. May be there is an issue with the version of the bootstrap css you have used as well.

.navbar .container-fluid>.navbar-header {

  float: left;

  margin-right: 10px;

}

.navbar .navbar-nav {

  float: left;

  margin: 5px;

}

.nav>li {

  float: left;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>



<body>

    <nav class = "navbar navbar-default">

        <div class = "container-fluid">

            <div class="navbar-header">

                <a href = "#" class = "navbar-brand">CMS System </a>

            </div>

            <ul class="nav navbar-nav">

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

            </ul>

        </div>

    </nav>

</body>

edited Jan 21 at 3:47

answered Jan 19 at 14:20

Mamun

26.6k71630

You have to add some extra bit of style. May be there is an issue with the version of the bootstrap css you have used as well.

.navbar .container-fluid>.navbar-header {

  float: left;

  margin-right: 10px;

}

.navbar .navbar-nav {

  float: left;

  margin: 5px;

}

.nav>li {

  float: left;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>



<body>

    <nav class = "navbar navbar-default">

        <div class = "container-fluid">

            <div class="navbar-header">

                <a href = "#" class = "navbar-brand">CMS System </a>

            </div>

            <ul class="nav navbar-nav">

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

            </ul>

        </div>

    </nav>

</body>

.navbar .container-fluid>.navbar-header {

  float: left;

  margin-right: 10px;

}

.navbar .navbar-nav {

  float: left;

  margin: 5px;

}

.nav>li {

  float: left;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>



<body>

    <nav class = "navbar navbar-default">

        <div class = "container-fluid">

            <div class="navbar-header">

                <a href = "#" class = "navbar-brand">CMS System </a>

            </div>

            <ul class="nav navbar-nav">

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

            </ul>

        </div>

    </nav>

</body>

.navbar .container-fluid>.navbar-header {

  float: left;

  margin-right: 10px;

}

.navbar .navbar-nav {

  float: left;

  margin: 5px;

}

.nav>li {

  float: left;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>



<body>

    <nav class = "navbar navbar-default">

        <div class = "container-fluid">

            <div class="navbar-header">

                <a href = "#" class = "navbar-brand">CMS System </a>

            </div>

            <ul class="nav navbar-nav">

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

                <li><a href="#">Home</a></li>

            </ul>

        </div>

    </nav>

</body>

edited Jan 21 at 3:47

answered Jan 19 at 14:20

Mamun

26.6k71630

edited Jan 21 at 3:47

answered Jan 19 at 14:20

Mamun

26.6k71630

answered Jan 19 at 14:20

Mamun

26.6k71630

answered Jan 19 at 14:20

Mamun

26.6k71630

I copied your code, it worked without including the custom css you provided.

– Sumaira Samar
Jan 19 at 14:32

@SumairaSamar, that's really grate to know:)

– Mamun
Jan 19 at 14:36

add a comment |

I copied your code, it worked without including the custom css you provided.

– Sumaira Samar
Jan 19 at 14:32

@SumairaSamar, that's really grate to know:)

– Mamun
Jan 19 at 14:36

I copied your code, it worked without including the custom css you provided.

– Sumaira Samar
Jan 19 at 14:32

@SumairaSamar, that's really grate to know:)

– Mamun
Jan 19 at 14:36

add a comment |

You could change

<nav class = "navbar navbar-default">

<nav class = "navbar navbar-expand">

making the navbar horizontal

answered Jan 19 at 14:24

Rob

4625

add a comment |

You could change

<nav class = "navbar navbar-default">

<nav class = "navbar navbar-expand">

making the navbar horizontal

answered Jan 19 at 14:24

Rob

4625

add a comment |

You could change

<nav class = "navbar navbar-default">

<nav class = "navbar navbar-expand">

making the navbar horizontal

answered Jan 19 at 14:24

Rob

4625

You could change

<nav class = "navbar navbar-default">

<nav class = "navbar navbar-expand">

making the navbar horizontal

answered Jan 19 at 14:24

Rob

4625

answered Jan 19 at 14:24

Rob

4625

answered Jan 19 at 14:24

Rob

4625

answered Jan 19 at 14:24

Rob

4625

add a comment |

using latest version of bootstrap no need of css, you can check the below solution.

I hope this will solve the issue.

Note: Added some css extra classes for styling the background of navigations

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">

        <span class="navbar-toggler-icon"></span>

    </button>

  <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">

    <ul class="navbar-nav text-right">

      <li class="nav-item active">

        <a class="nav-link" href="#">News</a>

      </li>

      <li class="nav-item active">

        <a class="nav-link" href="#">Products</a>

      </li>

    </ul>

  </div>

</nav>

answered Jan 19 at 14:35

DILEEP THOMAS

9831514

add a comment |

using latest version of bootstrap no need of css, you can check the below solution.

I hope this will solve the issue.

Note: Added some css extra classes for styling the background of navigations

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">

        <span class="navbar-toggler-icon"></span>

    </button>

  <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">

    <ul class="navbar-nav text-right">

      <li class="nav-item active">

        <a class="nav-link" href="#">News</a>

      </li>

      <li class="nav-item active">

        <a class="nav-link" href="#">Products</a>

      </li>

    </ul>

  </div>

</nav>

answered Jan 19 at 14:35

DILEEP THOMAS

9831514

add a comment |

using latest version of bootstrap no need of css, you can check the below solution.

I hope this will solve the issue.

Note: Added some css extra classes for styling the background of navigations

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">

        <span class="navbar-toggler-icon"></span>

    </button>

  <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">

    <ul class="navbar-nav text-right">

      <li class="nav-item active">

        <a class="nav-link" href="#">News</a>

      </li>

      <li class="nav-item active">

        <a class="nav-link" href="#">Products</a>

      </li>

    </ul>

  </div>

</nav>

answered Jan 19 at 14:35

DILEEP THOMAS

9831514

using latest version of bootstrap no need of css, you can check the below solution.

I hope this will solve the issue.

Note: Added some css extra classes for styling the background of navigations

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">

        <span class="navbar-toggler-icon"></span>

    </button>

  <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">

    <ul class="navbar-nav text-right">

      <li class="nav-item active">

        <a class="nav-link" href="#">News</a>

      </li>

      <li class="nav-item active">

        <a class="nav-link" href="#">Products</a>

      </li>

    </ul>

  </div>

</nav>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">

        <span class="navbar-toggler-icon"></span>

    </button>

  <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">

    <ul class="navbar-nav text-right">

      <li class="nav-item active">

        <a class="nav-link" href="#">News</a>

      </li>

      <li class="nav-item active">

        <a class="nav-link" href="#">Products</a>

      </li>

    </ul>

  </div>

</nav>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">

        <span class="navbar-toggler-icon"></span>

    </button>

  <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">

    <ul class="navbar-nav text-right">

      <li class="nav-item active">

        <a class="nav-link" href="#">News</a>

      </li>

      <li class="nav-item active">

        <a class="nav-link" href="#">Products</a>

      </li>

    </ul>

  </div>

</nav>

answered Jan 19 at 14:35

DILEEP THOMAS

9831514

answered Jan 19 at 14:35

DILEEP THOMAS

9831514

answered Jan 19 at 14:35

DILEEP THOMAS

9831514

answered Jan 19 at 14:35

DILEEP THOMAS

9831514

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku