CODEWITHSUNDEEP
htmlcssbootstrap-4frontend
Gonzalo Dambra
Gonzalo Dambra

Reputation: 980

Using bootstrap columns but showing one component below the other

This is my html code:

<label>Search:</label>
<input type="text" id="list_search" class="form-control col-8">
<button class="btn btn-info col-2">Search</button>

You see my input tag has 8 columns and my button has 2. Then I don't get why I'm getting this:

Isn't supposed they should be X-aligned?

Isn't supposed they should be X-aligned? What I expect is:

enter image description here

But I had to use <div class="row"> there, which is modifying margins (look at the label).

Upvotes: 1

Views: 52

Answers (1)

Alexey Samara
Alexey Samara

Reputation: 131

You need form inline

and don't forget to set for inside label

<form class="form-inline">
    <label for="list_search">Search:</label>
    <input type="text" id="list_search" class="form-control">
    <button class="btn btn-info">Search</button>
</form>

GL

Upvotes: 1

Related Questions