Why is my bootstrap dropdown menu taking up the whole width of the website even though it's so small

Admin 1
Viewed 37

I created a drop down menu and a input box form using the following code:

  <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 I applied is:

body {
  background-color: #b6e6bd;
  line-height: 1.6;
}

/* Containers */
.container-fluid {
  padding: 1% 20%;
  margin: auto;
  text-align: center;
}

However, the drop down menu is taking up the full width of the website and the blank input box is showing up on the same line. I did not do anything to style the buttons. Can someone pls help, I need them to appear on the same line.

enter image description here

bootstrap-4 css html
1 Answers

Because, dropdown is a div, and div is a block see examples

you need to use grid or btn-group

Or custom method with flex:

<div class="group">
  <div class="cell">Dropdown</div>
  <div class="cell">Input</div>
</div>
<style>
  .group {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
  }
</style>
user_141297110
Related