CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Bodil132
Bodil132

Reputation: 115

How do I add a dropdown menu to a text input in Bootstrap?

Thank you for taking a look at my question.

I'm using Bootstrap and I'm sure there's an easy solution to this, please help!

So All I'm trying to do here is add a dropdown in a text box, the dropdown consists of several flags and I need the input to be within the text input exactly like this:

See Text input here

What I get instead is a separated dropdown and text input which doesn't look very apealing, visually. kind of like this>

enter image description here

Heres the HTML I have so far:

<div class="form-group" style="margin-top:40px;">
       <label for="sms-send"><strong>SEND VIA SMS:</strong></label>
              <div class="input-group">
                <div class="input-group-btn">
                  <button type="button" class="btn btn-default btn-outline dropdown-toggle"
                  data-toggle="dropdown" aria-expanded="false" style="background-color:white; border-right:none;">
                    <img src="aus-flag.png">
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                  <li role="presentation"><a href="javascript:void(0)" role="menuitem"><img src="aus-flag.png"></a></li>
                  <li role="presentation"><a href="javascript:void(0)" role="menuitem"><img src="us-flag.png"></a></li>
                  <li role="presentation"><a href="javascript:void(0)" role="menuitem"><img src="mexico-flag.jpg"></a></li>
                  </ul>
                </div>
                <input type="text" class="form-control" style="border-left:none;">
                <span class="input-group-btn">
                   <button type="submit" class="btn btn-primary btn-green form-control">SEND</button>
                </span>
              </div>
            </div>

I would highly appreciate any help you can give on this! THANKS!

Upvotes: 1

Views: 4012

Answers (2)

Dhiraj
Dhiraj

Reputation: 1871

Wrap the entire .input-group inside some container and apply border to that parent div. Remove border from everything else. JSFIDDLE DEMO For eg:

HTML

<div class="input-container">
    <div class="input-group">
        ....
    </div>
</div>

CSS 

.input-container {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 5px;
}
.form-control {
  border: 0;
  box-shadow: none;
}
.input-group-btn .btn {
  border: 0;
}

Upvotes: 0

Akshay Arora
Akshay Arora

Reputation: 1945

Will something like this help? Bootply Link

Basically you need to focus on the div that has the class .input-group-addon. That's where you can put the images of the flags.

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">
        <select>
          <option>First</option> <!-- Replace it with images of your choice -->
          <option>Second</option>
        </select>
      </div>
      <input class="form-control" id="exampleInputAmount" placeholder="Amount" type="text">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

Upvotes: 1

Related Questions