CODEWITHSUNDEEP
htmlcssbootstrap-4
Salman Fazal
Salman Fazal

Reputation: 587

Align items in div bootstrap

I'm trying to align items in a div tag and I have tried a couple ways but failed to do so.

.

Basically this is what I have:

enter image description here

I tried using flex but when I align individual items to top, midlde or bottom, all 3 get aligned that way.

Is there a way I can do it using bootstrap only? and if not please help me with css. Thank you!

This is my code (the styles are in a separate file but I minimized it into the html code for this question):

<div class="card card-image" style="background-image: url(/uploads/projects/<%=user_data.projects[i]['image']%>); min-height: 200px;">
    <div class="text-white text-center rgba-black-strong py-3 px-4 rounded" style=" min-height: 200px;">
        <div class="--I tried flex and different aligns--">
            <p class="red-text">
                <i class="fa fa-pie-chart"></i>
                <%=user_data.projects[i].category%>
            </p>

            <h6 class="font-weight-bold">
                <%=user_data.projects[i].title%>
            </h6>

            <a class="btn btn-sm btn-red btn-rounded btn-md mb-1" data-toggle="modal" data-target="#projectModal<%=i%>"><i class="fa fa-clone left"></i> View</a>
        </div>
    </div>
</div>

Upvotes: 0

Views: 2874

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43604

You can use the classes d-flex, flex-column and justify-content-around to solve this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />

<div class="card card-image">
    <div class="d-flex justify-content-center rgba-black-strong py-3 px-4 rounded" style="min-height: 200px;">
        <div class="d-flex flex-column justify-content-around">
            <p class="red-text">
                <i class="fa fa-pie-chart"></i>
                1st item
            </p>
            <h6 class="font-weight-bold">
                2nd item
            </h6>
            <a class="btn btn-sm btn-red btn-rounded btn-md mb-1" data-toggle="modal" data-target="#projectModal">
              <i class="fa fa-clone left"></i> View
            </a>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions