I recently created a drop-down menu and an input form using the code below:
<div class="container-fluid">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
2
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1">
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div>
<input type="text" name="" value="">
</div>
The CSS styling I used is as follows:
body {
background-color: #b6e6bd;
line-height: 1.6;
}
/* Containers */
.container-fluid {
padding: 1% 20%;
margin: auto;
text-align: center;
}
After implementing this, I noticed that the drop-down menu was stretching across the entire width of the webpage and the empty input box was displaying on the same line. I didn't apply any specific styles to the buttons. Can someone please assist me in getting them to appear on the same line?