CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Di437
Di437

Reputation: 183

How can I get two divs, one with multiple nested divs next to each other?

I know this kind of question has been asked before, but the solutions listed there did not work for me.

I have two divs, one with text and the other one has multiple divs, in a nested structure. I want them placed beside each other. I tried display: inline-block as most solutions pointed out, but they did not work for me.

Here's my code:

<div class="close-date-div">Close Date:
    <div class="form-group" id="close_date">
        <div class="input-group date">
            <span class="input-group-addon" ><i class="fa fa-calendar"></i></span>  
            <input class="form-control" id="close_date_input" value="" type="text">
        </div>
    </div>
</div>

enter image description here

This is the output I am getting for that code snippet, how can make it so that Close Date and the input box are on the same line?

Upvotes: 0

Views: 57

Answers (4)

tresf
tresf

Reputation: 7922

Change

<div class="close-date-div">

To

<div class="close-date-div form-inline">

You may also want to add form-group. Note, this solution is specific to boostrap-only because you've shared code which is utilizing well-known bootstrap classes.

Upvotes: 0

S&#233;bastien
S&#233;bastien

Reputation: 12139

Bootstrap 3 is very opinionated when it comes to forms. If you use the provided classes you have a limited set of possible presentations.

You could set your form to use form-inline or maybe form-horizontal

Here I had to use xs because the snippet window is too small to trigger any other break point. You will also have to tweek column widths and vertical alignment.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form class="form-horizontal">
  <div class="close-date-div">

    <div class="form-group" id="close_date">
      <label class="col-xs-2 control-label">Close Date:</label>
      <div class="col-xs-10">
        <div class="input-group date">
          <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
          <input class="form-control" id="close_date_input" value="" type="text">
        </div>
      </div>
    </div>
  </div>
</form>

Upvotes: 0

Zach Decamp
Zach Decamp

Reputation: 25

I would comment but my rep isn't high enough yet.

I dealt with this recently, and I had to make sure that the positions were all set in order for the display: inline-block to work. I believe the following example should get you where you need to be.

.close-date-div{
  position: relative;
}

.form-group{
  position: relative;
  display: inline-block;
}

.input-group date{
  position:sticky;
  display: inline-block;
}

Upvotes: 0

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

Make your text some king of html element. In this case a made it a paragraph element with the <p> tag

Hope this helps!

.inline {
  display: inline-block;
}
<div class="close-date-div">
  <p class="inline">Close Date:</p>
  <div class="form-group  inline" id="close_date">
    <div class="input-group date">
      <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
      <input class="form-control" id="close_date_input" value="" type="text">
    </div>
  </div>
</div>

Upvotes: 1

Related Questions