CODEWITHSUNDEEP
twitter-bootstrap
Peter
Peter

Reputation: 1710

Place 2 Bootstrap input-group Blocks Next To Each Other

I have two date picker widgets placed on top of each other.

Code:

<div class="input-group datetimepicker" id="input-start-date">
    <span class="input-group-addon" id="addon-event">Start</span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
</div>
<div class="input-group datetimepicker" id="input-end-date">
    <span class="input-group-addon" id="addon-event">End</span>
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
</div>

Fiddle: https://jsfiddle.net/gz5p8s18

I would like to place them next to each other.

How can I change the code to have the datepicker widgets be placed side by side?

Upvotes: 1

Views: 1016

Answers (3)

Dev
Dev

Reputation: 410

Please run the following working fiddle:- 

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
<div class="row">
   <div class="col-md-6 col-sm-6 col-xs-6">
   
   
   <div class="input-group datetimepicker" id="input-start-date">
        <span class="input-group-addon" id="addon-event">Start</span>
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
    </div>
   </div>
      <div class="col-md-6 col-sm-6 col-xs-6">
   <div class="input-group datetimepicker"  id="input-end-date">
        <span class="input-group-addon" id="addon-event">End</span>
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
    </div>
       </div>

Good luck & hope that helps.

Upvotes: 3

Marcel Kr&#252;ger
Marcel Kr&#252;ger

Reputation: 909

You can use the Bootstrap Grid System for this: https://jsfiddle.net/dgyejw5o/

<div class="row">
  <div class="col-xs-6">
    <div class="input-group datetimepicker" id="input-start-date">
      <span class="input-group-addon" id="addon-event">Start</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
    </div>
  </div>
  <div class="col-xs-6">
    <div class="input-group datetimepicker" id="input-end-date">
      <span class="input-group-addon" id="addon-event">End</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
    </div>
  </div>
</div>

Upvotes: 1

Adam Griffiths
Adam Griffiths

Reputation: 792

The title and icon are in different positions, but will this do the trick? https://jsfiddle.net/gz5p8s18/1/

Updated HTML:

<div class="wrapper">
  <div class="input-group datetimepicker" id="input-start-date">
      <span class="input-group-addon" id="addon-event">Start</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
  </div>
  <div class="input-group datetimepicker" id="input-end-date">
      <span class="input-group-addon" id="addon-event">End</span>
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
      <input class="set-due-date form-control" type="text" value="21/03/2016 14:46" />
  </div>
</div>

CSS:

.wrapper {
  width: 100%;
  display: table;
}
.datetimepicker {
  display: table-cell;
  width: 50%;
}

Upvotes: 0

Related Questions