How to use bootstrap to fill white spaces

Question

I want to design a div that has an input box and some other elements. I want to use bootstrap to give a dynamic size to input box that change its width with changing window width and in mobile devices show in two line.

like this:

this is an example code without any class:

<form>
<div>
    <input type="submit" value="search">
    <select>
        <option>value1</option>
        <option>value2</option>
        <option>value3</option>
    </select>
    some text
</div>
<div>
    <input type="text" placeholder="search text input">
</div>

I have updated my solution. Please check that. – Nitheesh Nov 14 '16 at 06:50 — Nitheesh, Nov 14 '16 at 06:50

score 0 · Answer 1 · edited May 23 '17 at 12:24

In order to achieve your requirement you need to go for the Flexbox display property to achieve this using pure CSS method. Here you are re arranging the UI depending up on the screen resolutions. Flexbox display provides you the best method to set the opder of the div according to your preference. I have attached the sample snippet along with this.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.FormContainer {
 width: 100%;
}
.Class1 {
    width: 50%;
    float: left;
}
.Class2 {
    width: 50%;
    float: right;
}

@media only screen and (max-width: 768px) {
    .FormContainer {
     display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
 }
    .Class1 {
  order: 2;
        width: 100%;
        float: right;
    }
    .Class2 {
     order:1;
        width: 100%;
        float: left;
    }
}
</style>
<body>

<form class="FormContainer">
<div class="Class1">
    <input type="submit" value="search">
    <select>
        <option>value1</option>
        <option>value2</option>
        <option>value3</option>
    </select>
    some text
</div>
<div class="Class2">
    <input type="text" placeholder="search text input">
</div>
</form>

</body>
</html>

Hope this will work fine for you.

You can find more about Flexbox here http://css-tricks.com/snippets/css/a-guide-to-flexbox/ and http://philipwalton.github.io/solved-by-flexbox/.

Also look at this solution which explains more about Flexbox

thank you but this is not what I want! I don't want two 50% column. I want to 3 left element' width be their text with — Sadegh, Nov 13 '16 at 15:21
I have added the explanations for Class1 and Class2 please check that. — Nitheesh, Nov 13 '16 at 15:23

score 0 · Answer 2 · answered Nov 13 '16 at 16:12

I implemented the first image in your post and it below in the code. Try running it, dont forget to expand snippet

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form>
  <div class="row">
    <div class="col-sm-2">
      <input type="submit" class="form-control" value="search">
    </div>
    <div class="col-sm-3">
      <select class="form-control">
        <option>value1</option>
        <option>value2</option>
        <option>value3</option>
      </select>
    </div>
    <div class="col-sm-2">
      some text</div>

    <div class="col-sm-2">
      <input type="text" class="form-control" placeholder="search text input">
    </div>
  </div>

How to use bootstrap to fill white spaces

2 Answers2