CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3bootstrap-4
xbl
xbl

Reputation: 3

Aligning 2 DIVs on top on each other in bootstrap

So I'm using bootstrap to create an index home page what I'm trying to do is basically align in the center 2 divs on top of each other : I have a container-fluid then a row with 2 cols: in 1 of the cols I have 2 divs that I want to be aligned in the center ( both horizontally and vertically ), ( code is shown below )

here's an illustration : what I want to do

green is the container-fluid || red and blue are the divs I want to be aligned || an orange is a login form I want to add later on

my code goes like this : 

<div class="container-fluid mainwrapper p-2">
<div class="row">

    <div class="col">

        <div>
           <img src="pictures/logooo.png" class="my-2" alt="uc2">
        </div>

        <div>
           <a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
        </div>
    </div>
    <div class="col">

    <!-- Login form here -->

    </div>      
</div>  
</div>

here's a real picture of the problem

i want the green logo and the writing with the white background to be aligned in the center of the left column

real problem

what I realy want

Upvotes: 0

Views: 2416

Answers (3)

Donada
Donada

Reputation: 298

you can just give "col-md-6" to with column and a "text-align:center;" (horizontal align), and "margin:0 auto". Try this.

<div class="container-fluid mainwrapper p-2">
<div class="row">

    <div class="col-md-6" style="text-align:center;">

<div style="float: none; margin: 0 auto;">
        <div>
        <img src="pictures/logooo.png" class="my-2" alt="uc2">
        </div>

        <div>
        <a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
        </div>

<div>
    </div>



    <div class="col-md-6">

    <!-- Login form here -->

    </div>


</div>  
</div>

Upvotes: 0

Manikandan2811
Manikandan2811

Reputation: 841

add these steps:

HTML

<div class="text-center">
  <img src="pictures/logooo.png" class="my-2" alt="uc2">
</div>

css

.col {
  padding-left:50px;
}

Upvotes: 0

Mayuri More
Mayuri More

Reputation: 216

Add text-center class to divs you want to align center. Shown in below code

<div class="col">

    <div class="text-center">
    <img src="pictures/logooo.png" class="my-2" alt="uc2">
    </div>

    <div class="text-center">
    <a class="rounded shadow-sm bg-white biorHv px-3">Faculté NTIC | Departement de Scolarité</a>
    </div>


</div>

This will solve your problem..

Upvotes: 1

Related Questions