bootstrap 4 and input-group-prepend full width inputs

Question

I have the following code:

<div class="col-md-8 content-row-top-spacer">
  <div class="input-group">
     <div class="input-group-prepend"><span class="input-group-text">Name</span></div>
     <%= f.text_field :name, placeholder: 'Campaign Name', class: 'w-100' %>
  </div>
    <div id="campaign_name_error" class="errors_container"></div>
</div>

I would like my input to stretch across 100% of it's container, as well as have the prepend properly within the input, like in the boostrap demos.

However, I get the following result with this code:

How can I fix this?

Answer 1

you can use the class called form-control to stretch the size of the input field according to the parent of the input field.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/> <h2>Eample 1</h2> <p>with col-md-8</p> <div class="container"> <div class="col-md-8 content-row-top-spacer"> <div class="input-group"> <div class="input-group-prepend"><span class="input-group-text">Name</span></div> <input type="text" placeholder ='Capaign Name' class='form-control'> </div> <div id="campaign_name_error" class="errors_container"></div> </div> </div> <h2>Eample 2</h2> <p>with col-md-12</p> <div class="container"> <div class="col-md-12 content-row-top-spacer"> <div class="input-group"> <div class="input-group-prepend"><span class="input-group-text">Name</span></div> <input type="text" placeholder ='Capaign Name' class='form-control'> </div> <div id="campaign_name_error" class="errors_container"></div> </div> </div> <br/> <p>Both Example are different, if you will try to look these in medium screen</p> 

Answer 2

You can also use css

.input-group{
display : inline-block
}

and

<%= f.text_field :name, placeholder: 'Campaign Name', style: 'width:100%;' %>