CODEWITHSUNDEEP
htmlcssbootstrap-4
cssfan
cssfan

Reputation: 421

Why is button behaving like a block element?

Why is button behaving like a block element when it is a block-inline element? Input tag is inline as well so the code below should show input ang button besides each other horizontally but inteads it is showing one on top of another using Bootstrap 4.

<button type="button" style="display: inline" class="btn btn-primary">C</button>
<input type="text" style="display: inline" class="form-control" placeholder="Username" aria-describedby="basic-addon1">

Upvotes: 0

Views: 433

Answers (2)

Asons
Asons

Reputation: 87191

Bootstraps concept is a grid layout structure, so by simply grouping them will make it work fine, and it will scale and use available space properly (width in this case)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
  <span class="input-group-btn">
    <button type="button" class="btn btn-primary">C</button> 
  </span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53664

.form-control has width: 100%;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" style="display: inline" class="btn btn-primary">C</button> 
<input type="text" style="display: inline" class="form-control" placeholder="Username" aria-describedby="basic-addon1">

Set width: auto; and it displays inline as expected

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" style="display: inline" class="btn btn-primary">C</button> 
<input type="text" style="display: inline; width: auto;" class="form-control" placeholder="Username" aria-describedby="basic-addon1">

Upvotes: 2

Related Questions