CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3bootstrap-4
ganesh kaspate
ganesh kaspate

Reputation: 2695

Align the items in a div using Bootstrap 4

I am new to front end. The question I am asking may be very basic. Here I am using ReactJS.

enter image description here

So actually, I am trying to do this. So, what I have tried is 

<div className="row">
    <div className="col-10" style={selectques}>
        <div className="row">
            <div className="col-4">
                <span className="align-middle">1</span>
            </div>
        </div>
    </div>
    <div className="col-2">
    </div>
</div >

Here, I tried using the select but still it was not working properly. Can anyone suggest me how to do this? And align it the way it is? Any hint will be helpful.

Upvotes: 0

Views: 2282

Answers (1)

rkm
rkm

Reputation: 3151

By default Bootstrap grid uses flexbox layout. It means that rows (tags with class .row) have display: flex.

Basically it means you have to align items along the cross axis on the current line. To do that you should use align-items. Bootstrap already has helper classes for it. So you just need to add appropriate one to your .row:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row align-items-center" style="background-color: #f7f7f7;">
  <div class="col">normal text</div>
  <div class="col-auto"> <input type="text"> </div>
  <div class="col"><h1>Big text</h1></div>
  <div class="col">
    <select>
      <option value="1" selected>Option 1</option>
      <option value="1">Option 2</option>
    </select>
  </div>
</div>

Upvotes: 1

Related Questions