CODEWITHSUNDEEP
htmlbootstrap-4
user12247067
user12247067

Reputation:

Why can I not get Nav-tabs to align vertically when viewed on small screens?

Right, why can I not get my .nav .nav-tabs to stack vertically despite using flex-sm-column. I'm really starting to lose my patience with this now. Why?

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
<script src="../Script/toggle.js" type="text/javascript"></script>  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs flex-sm-column" role="tablist">
    <li class="nav-item active">
        <a href="#home" class="nav-link show mobile-full-screen-width" role="tab" data-toggle="tab">Overview</a>
    </li>
    <li class="nav-item">
        <a href="#2" class="nav-link mobile-full-screen-width" role="tab" data-toggle="tab">Why Us</a>
    </li>
    <li class="nav-item">
        <a href="#3" class="nav-link mobile-full-screen-width" role="tab" data-toggle="tab">How we can help</a>
    </li>
    <li class="nav-item">
        <a href="#4" role="tab" class="nav-link mobile-full-screen-width" data-toggle="tab">Express your interest</a>
    </li>
</ul>
</body>
</html>

Upvotes: 0

Views: 41

Answers (1)

mrpbennett
mrpbennett

Reputation: 1956

Do you have a code pen or a repo I can look at? Id like to see what's currently happening.

From looking at it. It seems you dont have the class d-flex on your unordered list. Although you have a flex util class you still require the d-flex one also. As you can see from the below:

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Placing the class d-flex on to your unordered list will make the list have display: flex then you would be able to use the other flex classes as needed.

https://getbootstrap.com/docs/4.3/utilities/flex/#direction

Upvotes: 1

Related Questions