Customizing input fields in bootstrap

Question

How do I place the two input fields close to each other when they have shorter widths on larger screen. The problem is that I want the input fields to be in one line with shorter widths. I eventually achieve that but then on shorter screens it stacks up even though it has enough space to be in one line. Here is the demo.

What I would like to have: Keep the input fields in one line as long as there widths fit in the viewport or else, stack them up with full width.

NOTE: I have just started learning bootstrap and not well versed with all the classes.

HTML

<div class="site-wrapper">
    <div class="jumbotron">
        <h1>Header</h1>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="input-group-lg">
                        <input id="user" class="form-control form-inline" placeholder="Your name" type="text">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-group-lg">
                        <select id="boardSize" class="form-control form-inline" title="Select Size">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background-color: #fff;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    margin: 0;
}
html, body {
    height: 100%;
    background-color: #333;
}
.site-wrapper {
    width: 100%;
    height: 100%;
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
    box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.jumbotron {
    background-color: #ccbb99 !important;
    /*background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));*/
    height: 100%;
    margin-bottom: 0;
}
.jumbotron h1 {
    font-family: chalkitup, "sans-serif";
    color: #69350F !important;
}
#user, #boardSize {
    max-width: 280px;
}

So you want the input to stack as soon as the width is smaller than 2 * 280? — François-Xavier Aeberhard, Feb 01 '17 at 08:29
Yes, as soon as it goes down to the width of a mobile device. And when its small, it should have full width. — Ayan, Feb 01 '17 at 08:30

Merlin · Accepted Answer · 2017-02-01T18:43:37.273

To prevent stacking you should use col-xs-*. If you combine with pull-right and pull-left then you can choose where you want to place your input in the grid. Notice the use of form-inline class

 <form class="form-inline">
    <div class="col-xs-6">
        <div class="form-group pull-right">
                <div class="input-group-lg ">
                    <input id="user" type="text" class="form-control form-inline" placeholder="Your name">
                </div>
        </div>
       </div>
    <div class="col-xs-6">
      <div class="form-group pull-left">
              <div class="input-group-lg ">
                  <select id="boardSize" class="form-control form-inline" title="Select Size">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                  </select>
              </div>
      </div>
    </div>
  </form>

DEMO

When the viewport is less than 767, it stacks up to the right, when there is space on the right. Do I need to create another media query for it? — Ayan, Feb 01 '17 at 08:44
You can use `col-xs-` and `pull-right` `pull-left` see DEMO http://www.bootply.com/Kvlxf99pnN SO question about non stacking http://stackoverflow.com/questions/18715955/bootstrap-3-grid-with-fixed-wrapper-prevent-columns-from-stacking-up — Merlin, Feb 01 '17 at 08:50

Customizing input fields in bootstrap

1 Answers1

DEMO