samedi 19 janvier 2019

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. What is wrong with code?

<html>

<head>
<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>


</head>

<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>

</html>




Aucun commentaire:

Enregistrer un commentaire