Currently, here's the code I have, and I want it to appear like this.
What are the steps needed to adjust the CSS in order to achieve that?
.nav-wizard {
display: table;
width: 100%;
}
.nav-wizard > li {
display: table-cell;
text-align: left;
}
...
@media (max-width: 768px) {
.nav-wizard.nav-justified > li > a {
border-radius: 4px;
margin-right: 0;
}
.nav-wizard.nav-justified > li > a:before,
.nav-wizard.nav-justified > li > a:after {
border: none !important;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="page-header">
<h1>Nav Wizard Demo</h1>
</div>
<ul class="nav nav-wizard">
<li class="active"><a href="#">Home</a>
</li>
<li><a href="#">Profile</a>
</li>
<li><a href="#">Messages to looooooooooooonnnngggggggggg</a>
</li>
</ul>
<BR>
<input type="text" class="form-control">
</div>
</div>
</div>The issue is that the right side of the wizard doesn't align with the right side of the input field. The length of the wizard doesn't match the input's size.
I am looking for a solution to make the last part of the wizard (with the messages) align with the right side of the input field. How can this be achieved?