can i use Bootstrap container class inside row? - html

Question

I want to know can i use container class inside row. Actually i'm new using bootstrap so i want to know if i use container inside row so it's fine or not
<main class="container-fluid">
<header>
<div class="row">
<nav class="navbar dark-r">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#">Brand</a> </div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
</div>
<nav class="nav light-r">
<ul class="list-unstyled list-inline">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</nav>
</nav>
</div>
</header>
</main>
i'm also using nav inside nav is this right? or wrong or i have to use div except it.

Answer 1

Yes, you can use container class inside row class. Since all that container class does is add's 15px padding on sides and centeres itself using margin auto on left and right. Thus there is no reason why you would not be able to use container inside your row class.

Answer 2

Short answer, yes.
Regarding Bootstrap 4:
this is what the .row, .container and .col classes do :
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
width: 100%;
}
.col-{size} {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
Remember that .row and .nav classes both turn the direct children into flex items

Answer 3

To answer your second question about using multiple <nav> tags, it's better to use the .nav class as part of a <ul> tag. For example, please see below for a basic navbar which I've pulled from the W3Schools Bootstrap 3 tutorial which will clearly explain what markup you need to use.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
As you can see, the markup uses a single <nav> tag which basically acts as a wrapper for the two <ul> tags.
Hope this helps!
P.S - It's not compulsory to use the .navbar-right class in the second <ul> tag in your markup if you want a different navigation layout!