CODEWITHSUNDEEP
cssbootstrap-4
NeuroWinter
NeuroWinter

Reputation: 511

Bootstrap V4 form-inline to stacked

I currently have a small form with 3 elements, a label, input, and button.

I would like the elements to be stacked on top of each other (the default form layout) in screen sizes extra small to medium. And then form medium up I would like the form to be inline.

This is the code I have so far:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="col-auto pb-3 ml-auto">
  <form class="form-inline" method="post">
    <div class="form-group mx-sm-3 mb-2">
      <label for="refined_search">Refine Search: </label>
    </div>
    <div class="form-group mx-sm-3 mb-2">
      <input id="refined_search" type="text" name="refined_search">
    </div>
    <button class="btn btn-primary" type="submit" }>Submit</button>
  </form>
</div>

Upvotes: 0

Views: 408

Answers (2)

Vash72
Vash72

Reputation: 622

@media (min-width: 768px) {
  .my-form-inline {
    display: flex;
    flex-flow: row nowrap;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="col-auto pb-3 ml-auto">
  <form class="my-form-inline" method="post">
    <div class="form-group mx-sm-3 mb-2">
      <label for="refined_search">Refine Search: </label>
    </div>
    <div class="form-group mx-sm-3 mb-2">
      <input id="refined_search" type="text" name="refined_search">
    </div>
    <div class="form-group mx-sm-3 mb-2">
      <button class="btn btn-sm btn-primary" type="submit">Submit</button>
    </div>
  </form>
</div>

Upvotes: 1

Puneet
Puneet

Reputation: 1741

One way of achieving this is using Media query in CSS, unless that's not what you are looking for.

In your HTML file add below meta code to head tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A viewport element gives the browser instructions on how to control the page's dimensions and scaling.

Add an id on your form. This is optional, you can use form class name too, but make sure you use the same in CSS to refer to the form.

In CSS , use media queries

@media only screen and (min-width: 600px) {
  #test{
    display: block;
  }
}
@media only screen and (min-width: 768px) {
  #test{
    display: inline-flex;
  }
}

Upvotes: 1

Related Questions