My Bootstrap 3 navbar-btn alignment seems off compared to the navbar-form. Before delving into CSS customization, I want to confirm if the issue lies within the Bootstrap markup itself.
Here is a snapshot of the layout:
Below is the HTML code snippet for reference:
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-4">
<button type="button" class="btn btn-primary navbar-btn" data-toggle="offcanvas"><i class="fa fa-th-list fa-fw"></i></button>
</div><!-- /.col-xs-2.col-sm-4 -->
<div class="col-xs-8 col-sm-4">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="search" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="button" class="btn btn-primary"><i class="fa fa-search fa-fw"></i></button>
</span>
</div><!-- /.input-group -->
</form>
</div><!-- /.col-xs-8.col-sm-4 -->
<div class="col-xs-2 col-sm-4">
<button type="button" class="btn btn-primary navbar-btn"><i class="fa fa-cog fa-fw"></i></button>
</div><!-- /.col-xs-2.col-sm-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
After running the code through Bootlint and validating it as HTML5 compliant, no errors were detected.
I would appreciate any insights or suggestions. Thank you.