CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Smithy
Smithy

Reputation: 847

Make checkbox, select and input fields inline

I am trying to make a search bar where a green div would be in the middle of the grey one(see http://codepen.io/anon/pen/LRBEvq?editors=1100), and checkboxes, select drop menu, and input field all inline with two buttons - so everything in the same row. I am using Bootstrap to make it responsive but got stuck and can't figure it out.. thank you for all the help!

Here's my html:

.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  margin: 0 auto;
}
.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
}
button {
  height: 37px;
  width: 160px;
}
.choice {
  background-color: lightgrey;
  height: 37px;
}
.checkbox {
  width: 207px;
  border: 1px solid white;
}
.choice-select {
  width: 173px;
}
.choice-input {
  width: 390px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-7">
            <!-- main content -->

            <div class="checkbox">
              <span class="choice-details">
                 <label class="checkbox-inline">
                   <input type="checkbox" value="" checked>Lorem
                 </label>
                 <label class="checkbox-inline">
                   <input type="checkbox" value="">Ipsum
                 </label>
               </span>
            </div>
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>

          </div>
          <div class="col-md-5">
            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

Upvotes: 4

Views: 23197

Answers (5)

Muneeb Pullani
Muneeb Pullani

Reputation: 116

Horizontal centering:

For horizontal centering, we want the left and right margin to be equal. The way to do that is to set the margins to 'auto'. This is normally used with a block of fixed width, because if the block itself is flexible, it will simply take up all the available width.

Vertical centering:

The essential rules are:

  1. Make the container relatively positioned, which declares it to be a container for absolutely positioned elements.

  2. Make the element itself absolutely positioned.

  3. Place it halfway down the container with 'top: 50%'. (Note that 50%' here means 50% of the height of the container.)

  4. Use a translation to move the element up by half its own height. (The '50%' in 'translate(0, -50%)' refers to the height of the element itself.)

So your code may seem like this

.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  position: relative;
}

.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

I hope you solved all the other problems.

Upvotes: 3

ugreen
ugreen

Reputation: 670

You should be able to do what you want with only bootstrap markup. I've forked your pen and modified it a little:

http://codepen.io/ugreen/pen/XjBpqX

<div class="container">
    <div class="row">

            <div class="col-md-3 text">
                Lorem lorem lorem
                <div class="pull-right">Ipsum lorem ipsum</div>
            </div>

            <div class="col-md-5">
                <div class="form-inline">
                    <div class="form-group">
                        <input type="checkbox" value="" checked>
                        <label>Lorem</label>
                        <input type="checkbox" value="">
                        <label>Ipsum</label>
                    </div>
                    <div class="form-group">
                        <select class="form-control choice-select">
                            <option value="one">One</option>
                            <option value="two">Two</option>
                            <option value="three">Three</option>
                            <option value="four">Four</option>
                            <option value="five">Five</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="text" placeholder="Placeholder text">
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="button-group">
                    <button class="btn btn-default">Lorem ipsum lorem</button>
                    <button class="btn btn-default">Lorem lorem lorem</button>
                </div>
            </div>
        </div>
    </div>
</div>

But it might be even better to do something like in the bootstrap docs about navbars: http://getbootstrap.com/components/#navbar

Upvotes: 1

andreas
andreas

Reputation: 16936

Use display: inline-block; for your wrapper divs to behave like inline elements without losing their block properties:

.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
  display: inline-block;
}

If you also want the buttons to be in the same row, use a <div class="col-md-12"> for the whole content.

To center your menu bar horizontally, use margin: 0 auto;; to center it vertically, position it, apply a top: 50%; and translate it back the half of its size in negative y-direction (up):

.formContainer {
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
}

To make the input text field as long as the remaining space, just set the width of the input the same as its wrapper div:

.mainContent .choice-input input {
    width: inherit;
}


.main {
  background-color: grey;
  width: 1202px;
  height: 156px;
  margin: 0 auto;
}
.formContainer {
  width: 1140px;
  height: 85px;
  background-color: green;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}
button {
  height: 37px;
  width: 160px;
}
.choice {
  background-color: lightgrey;
  height: 37px;
}
.checkbox {
  width: 207px;
  border: 1px solid white;
}
.choice-select {
  width: 173px;
}
.choice-input {
  width: 390px;
}
.mainContent .checkbox,
.mainContent .choice-select,
.mainContent .choice-input {
  display: inline-block;
}
.mainContent .choice-input input {
  width: inherit;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-12">
            <!-- main content -->

            <div class="checkbox">
              <span class="choice-details">
                <label class="checkbox-inline">
                  <input type="checkbox" value="" checked>Lorem
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" value="">Ipsum
                </label>
              </span>
            </div>
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>

            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>

Upvotes: 5

arsinawaz
arsinawaz

Reputation: 480

Check the code below, i have put the html controls in separate divs with bootstrap grid classes to make them inline and added margin: 0 auto in .formContainer class

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

<body>
  <div class="container">
    <div class="main">
      <div class="formContainer">
        <div class="col-md-12">Lorem lorem lorem
          <div class="pull-right">Ipsum lorem ipsum</div>
        </div>
        <div class="row mainContent">
          <!-- mainContent -->
          <div class="col-md-7">
            <!-- main content -->
            <div class="col-md-4">
            <div class="checkbox">
              <span class="choice-details">
                <label class="checkbox-inline">
                  <input type="checkbox" value="" checked>Lorem
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" value="">Ipsum
                </label>
              </span>
            </div>
             </div>

            <div class="col-md-4">
            <div class="choice-select">
              <select class="form-control">
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
                <option value="four">Four</option>
                <option value="five">Five</option>
              </select>
            </div>
            </div>

            <div class="col-md-4">
            <div class="choice-input">
              <input type="text" placeholder="Placeholder text">
            </div>
            </div>

          </div>
          <div class="col-md-5">
            <button>Lorem ipsum lorem</button>
            <button>Lorem lorem lorem</button>
          </div>
          <!-- end main content -->
        </div>
        <!-- end mainContent -->
      </div>
    </div>
  </div>




.main {
    background-color: grey;
    width: 1202px;
    height: 156px;
    margin: 0 auto;
}

.formContainer {
    width: 1140px;
    height: 85px;
    background-color: green;
  margin: 0 auto;

}

button {
    height: 37px;
    width: 160px;
}

.choice {
    background-color: lightgrey;
    height: 37px;
}

.checkbox {
    width: 207px;
    border: 1px solid white;
}

.choice-select {
    width: 173px;
}

.choice-input {
    width: 390px;
}

Upvotes: 1

Kiran Dash
Kiran Dash

Reputation: 4956

Try modifying these rules:

.checkbox, .radio {
    position: relative;
    display: inline-block; // changed from block to inline-block. Block will take 100% width. To keep elements inline you must use inline-block
    margin-top: 10px;
    margin-bottom: 10px;
}

.choice-select {
    width: 173px;
    display: inline-block; // added inline-block
}

.choice-input {
    width: 176px; // reduced width.
    display: inline-block; // added inline-block
}

Upvotes: 1

Related Questions