CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4flexbox
user2353003
user2353003

Reputation: 552

stack <div> elements within a "row" class Bootstrap4

I'm trying to find a way to stack an element within a row class.

See JS Fiddle here: https://jsfiddle.net/jLhvmq24/2/

I need small tag "Enter Business Email" to show-up below the input box

<div class="row">
  <div class="input-group col-10">
    <input type="text" class="form-control" placeholder="email address">
    <small class="text-muted">Enter Business Email.</small>
  </div>
  <div class="col-2">
    <button class="btn btn-light">Subscribe</button>
  </div>
</div>

Upvotes: 0

Views: 71

Answers (2)

Tiago Soriano
Tiago Soriano

Reputation: 1

You could also use grids to solve it.

CSS

.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
     "input"
     "small";
}

.input-1 {
  grid-area: input;
}

.small-1 {
  grid-area: small;
}

HTML

 <div class="row">
   <div class="input-group col-10 container">
     <input type="text" class="form-control input-1" placeholder="email address">
     <small class="text-muted small-1">Enter Business Email.</small>
   </div>
   <div class="col-2">
     <button class="btn btn-light">Subscribe</button>
   </div>
 </div>

You can remove the padding overwriting it from the Bootstrap cols classes

Upvotes: 0

Manjuboyz
Manjuboyz

Reputation: 7056

  1. Use the outer most parent(row) to flex row(by default it displays row).
  2. Since you need the text to be below the input so add flex-direction:column; to the .input-group class.

fiddle

.row {
  display: flex;
}

.input-group {
  display: flex;
  flex-direction: column;
}
<div class="row">
  <div class="input-group col-10 mb-4">
    <input type="text" class="form-control" placeholder="email address">
    <small class="text-muted">Enter Business Email.</small>
  </div>
  <div class="col-2">
    <button class="btn btn-light" type="button">Subscribe</button>
  </div>
</div>

Upvotes: 2

Related Questions