6

It seems that the width of select element and input element are equal. How can I make it so that input element would take much more space and select would take less space?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> <select class="custom-select" id="inputGroupSelect03"> <option selected>Choose...</option> <option value="1">One</option> </select> <input class="form-control"> </div>

Improve this question

2 Answers 2

Reset to default
5

Try adding col-* classes in the select and input:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="input-group mb-3 row"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> <select class="custom-select col-4" id="inputGroupSelect03"> <option selected>Choose...</option> <option value="1">One</option> </select> <input class="col-8 form-control"> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

@BillPham Glad, it worked. Make sure you add row class in the container. The grid layout of bootstrap is designed around this structure.
4

You need to add col-* class to your select

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button">Button</button> </div> <select class="custom-select col-3" id="inputGroupSelect03"> <option selected>Choose...</option> <option value="1">One</option> </select> <input class="form-control col"> </div>

.input-group has already .row style so no need to give .row class. if you give .row then it gives negative margin that doesn't need.

Improve this answer

5 Comments

Welcome @BillPham :)
Why don't we need the add row class into the parent element though? As in the other answer, he/she does have row class.
You see if we give row class then it add margin left and right to -15px and in this case we don't need it
Bootstrap 4 use flex so you also not worry about clearfixing element.
@BillPham .input-group has already .row style so no need to give row. in that, if you give row then it gives negative margin that doesn't needed

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.