CODEWITHSUNDEEP
csstwitter-bootstrap
Mahesh G
Mahesh G

Reputation: 1276

Combining the Select and Input box in a row with Boostrap

How can I combine all the form group items such as Select, Input items together just using bootstrap framework?

I have tried the below way but as expected I am getting the space between Select and Input Box

DEMO

Upvotes: 0

Views: 696

Answers (2)

Robert
Robert

Reputation: 6967

The problem is your declaration of mx-sm-3. This applies for the -sm breakpoint and greater if there is no other declaration. The simplest way to correct this is add a reset at the larger breakpoint: mx-md-0:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="form-inline">
    <div class="form-group">
      <select class="custom-select mx-md-0">
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
      </select>
    </div>
    <div class="form-group mx-sm-3 mx-md-0">
      <input class="form-control" type="text">
    </div>
    <div class="form-group mx-sm-3 mx-md-0">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</div>

Expand the above code snippet to see how it will render when you exceed the -sm breakpoint. I also changed your <select> to make use of the custom-select class.

Upvotes: 1

Jade Cowan
Jade Cowan

Reputation: 2583

I'm not sure if this is what you're after, but if it's not, clarify what you're after a little more and I might be able to help.

If you're just wanting to group the items together, bootstrap has a card class that allows you to group elements into a container of sorts. The code below is wrapped in bootstraps grid system. I've put your code into a div tag with a card class. In a second example, I've removed a the inline form class, so you can see how the inputs are stacked vertically.

<div class="container mt-5">
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <div class="form-inline">
                        <div class="form-group mx-sm-3 mb-2">
                            <select class="form-control form-control-sm">
                                <option>One</option>
                                <option>Two</option>
                                <option>Three</option>
                            </select>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input class="form-control" type="text">
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <div class="form">
                        <div class="form-group mx-sm-3 mb-2">
                            <select class="form-control form-control-sm">
                                <option>One</option>
                                <option>Two</option>
                                <option>Three</option>
                            </select>
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <input class="form-control" type="text">
                        </div>
                        <div class="form-group mx-sm-3 mb-2">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here's a codeply project so you can see how the layout.

Upvotes: 1

Related Questions