CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
mrassili
mrassili

Reputation: 371

How can I make navs horizontal all the time ? (Bootstrap 4)

I'm trying to make my navs responsive using this code from Bootstrap4 . I want them horizontal all the time so I must use the the classes : flex-column flex-row flex-fill text-center instead of flex-column flex-xs-row flex-xs-fill text-xs-center cause I am working with BS4 but It doesn't work either way. (AND by the way, please explain to me what role does each one of those classes play in making the navs responsible, I mean what if I remove one of those will it affect anything?)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Six+Caps|Source+Code+Pro" rel="stylesheet">
<nav class="nav nav-fill nav-justified flex-column flex-row" role="navigation">
  <a href="#" class="nav-item nav-link active flex-fill text-center">Home</a>
  <a href="#" class="nav-item nav-link flex-fill text-center">Lorem</a>
  <a href="#" class="nav-item nav-link flex-fill text-center">Ipsum</a>
  <a href="#" class="nav-item nav-link flex-fill text-center">Dolor</a>
</nav>
<div class="text-center" id="underc">
  <h1>UNDER CONSTRUCTION</h1>
</div>

Upvotes: 0

Views: 415

Answers (1)

TidyDev
TidyDev

Reputation: 3668

Any reason why you need the flex bits in there buddy?

Be sure to place the stylesheet links in the head, i'm not sure if you were doing this from your code snippet.

The below way places the links into a list. If you wanted to be fully valid html then you should place the list items inside of a

    tag.

    The below code should be responsive and always horizontal.

    <html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
    <link href="https://fonts.googleapis.com/css?family=Six+Caps|Source+Code+Pro" rel="stylesheet">
</head>

<body>
    <nav class="nav nav-fill nav-justified" role="navigation">
        <li class="nav-item nav-link"><a href="#" class="active text-center">Home</a></li>
        <li class="nav-item nav-link"><a href="#" class=" text-center">Lorem</a></li>
        <li class="nav-item nav-link"><a href="#" class="text-center">Ipsum</a></li>
        <li class="nav-item nav-link"><a href="#" class="text-center">Dolor</a></li>
    </nav>
    <div class="text-center" id="underc">
        <h1>UNDER CONSTRUCTION</h1>
    </div>
</body>

</html>

    Hope it helps ;)

    Upvotes: 1

    Related Questions