CODEWITHSUNDEEP
htmlcssbootstrap-4
snowflakekiller
snowflakekiller

Reputation: 3568

bootstrap 4 and input-group-prepend full width inputs

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:

enter image description here

How can I fix this?

Upvotes: 0

Views: 3283

Answers (2)

T. Shashwat
T. Shashwat

Reputation: 1165

You can also use css 

.input-group{
display : inline-block
}

and

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

Upvotes: 0

nitishk72
nitishk72

Reputation: 1746

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>

Upvotes: 2

Related Questions