Why does bootstraps d-flex class stop my div from stretching 100% width?

Question

I've got a div wherein I want two elements to set side by side: a search input field and corresponding search submit button.

So far I've tried to accomplish this with the following code:

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

<div class="container w-100 mt-4 border-bottom pb-3 h-25 align-content-center" style="box-sizing: border-box;">
		<div class="row">
			<div class="col-1 position-relative d-flex align-items-center"><span class="mh-100" style="line-height: 1rem">Class20</span>
			</div>
			<div class="col-7 mw-100 align-items-center position-relative d-flex">
				<form action="" class="justify-content-center position-relative m-0">
					<input type="search" name="" value="" placeholder="search" class="w-100 align-items-center pl-3" id="search">
				</form>
				<button class="btn-outline-primary"type="submit">Search</button>
			</div> <!--column 7-->
			<div class="col-4">
				<button class="btn-outline-primary"type="submit">Log In</button>
				<button class="btn-outline-primary"type="submit">Sell your stuff</button>
			</div> <!-- col-4 -->
		</div> <!--row-->
</div>

The d-flex does what I want. It puts the search field and the button side by side. The problem I'm encountering is that it also leaves about 4 columns of white space between that div and the next. In other words, it doesn't stretch the full 7 columns I've specified. How can I resolve that issue, without pushing my button to the next line?

Answer 1

Well, your col-7 ( which contains the input and button ) has the right width, the problem is that your input and button do not cover the whole width of their parent ( the col-7 ) .

So you can add some bootstrap classes to the input ( for eg col-8 ) and to the button ( for eg col-4 ). That way they will cover the whole width of their parent.

You can also style them directly with CSS ( give them custom widths in % ) or use other bootstrap classes ( col-9 col-3 etc. )

OR you could add

.d-flex form{
  flex-grow: 1
}

this way , the input will occupy all the remaining space inside the col-7 parent

See example in snippet below ( using col-8 and col-4 ) or jsFIddle

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container w-100 mt-4 border-bottom pb-3 h-25 align-content-center" style="box-sizing: border-box;">
  <div class="row">
    <div class="col-1 position-relative d-flex align-items-center"><span class="mh-100" style="line-height: 1rem">Class20</span>
    </div>
    <div class="col-7 mw-100 align-items-center position-relative d-flex">
      <form action="" class="justify-content-center position-relative m-0 col-8">
        <input type="search" name="" value="" placeholder="search" class="w-100 align-items-center pl-3 " id="search">
      </form>
      <button class="btn-outline-primary col-4" type="submit">Search</button>
    </div>
    <!--column 7-->
    <div class="col-4">
      <button class="btn-outline-primary" type="submit">Log In</button>
      <button class="btn-outline-primary" type="submit">Sell your stuff</button>
    </div>
    <!-- col-4 -->
  </div>
  <!--row-->
</div>

Bootstrap splits the elements widths into 12 columns. 100% = 12 col-1. So if you want two side-by-side elements to cover the full width of the parent, their 'column numbers' must add up to 12. ( col-8 and col-4 , col-6 col-6, col-9 col-3 etc. )