CODEWITHSUNDEEP
htmltwitter-bootstrap
JamesB
JamesB

Reputation: 197

Multiple small input elements on one row without wrapping

I'm using Bootstrap 3 and try to put multiple small input elements show up on the same line right next to each other, but I don't understand how I'm supposed to do this without having them wrap, or having the inputs be too wide.

How I want it to look:

How I want it to look

(input fields are read only)

I sort of made it work with the code below, but if I delete the glypicon-part it will wrap for some reason, and i'm unable to add a checkbox without it wrapping.

        <div class="col-sm-3">
            <div class='input-group date'>
                <input type='text'
                       value='07:00'
                       name="jhg"
                       class="form-control"
                       readonly/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>

                <input type='text'
                       value='15:00'
                       name="fhgf"
                       class="form-control tilTimepicker"
                       readonly/>
                <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
            </div>
        </div>

Upvotes: 0

Views: 511

Answers (1)

zer00ne
zer00ne

Reputation: 43880

You are using Bootstrap so use the classes: .form-inline and .col-[sm,md,lg]-12. The form controls will be inline until the breakpoint (viewport 768px), then it wraps. See first example in demo.

If you are completely against any wrapping whatsoever, then you can use flex-wrap:nowrap. It will never wrap to a new line. See second example in demo.

Demo

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title></title>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
  <style>
    .flex {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around
    }
  </style>
</head>

<body>
  <main class='container-fluid'>
    <h2>Bootstrap</h2>
    <section class='row'>
      <form class="form-inline col-sm-12">
        <label class='control-label col-sm-2'>Check&nbsp;
  	<input type='checkbox' class='form-control'>
    </label>
        <label class='control-label col-sm-2'>True&nbsp;
  	<input type='radio' class='form-control' name='rad'>
    </label>
        <label class='control-label col-sm-2'>False&nbsp;
  	<input type='radio' class='form-control' name='rad'>
    </label>
        <label class='control-label col-sm-2'>Text&nbsp;
  	<input type='text' class='form-control'>
    </label>
        <label class='control-label col-sm-2'>Digits&nbsp;
  	<input type='number' class='form-control'>
    </label>
        <label class='control-label col-sm-2'>Date&nbsp;
  	<input type='text' class='form-control'>
    </label>
      </form>
    </section>
    <hr>
    <h2>Flexbox flex-wrap:nowrap</h2>
    <section class='row'>
      <form class="flex form-inline col-sm-12">
        <label class='control-label'>Check&nbsp;
  	<input type='checkbox' class='form-control'>
    </label>
        <label class='control-label'>True&nbsp;
  	<input type='radio' class='form-control' name='rad'>
    </label>
        <label class='control-label'>False&nbsp;
  	<input type='radio' class='form-control' name='rad'>
    </label>
        <label class='control-label'>Text&nbsp;
  	<input type='text' class='form-control'>
    </label>
        <label class='control-label'>Digits&nbsp;
  	<input type='number' class='form-control'>
    </label>
        <label class='control-label'>Date&nbsp;
  	<input type='text' class='form-control'>
    </label>
      </form>
    </section>
  </main>
</body>

</html>

Upvotes: 1

Related Questions