how to assign top and left for an absolute position element in bootstrap

Question

User887623398 posted

Hello,

How to assign margin and top and left in bootstrap4?

I know for margin and padding can use :

mt-5 or pl-4

But it isn't working well for me.

Thanks,

Saeed

Answer 1

User1535942433 posted

Hi SaeedP,

SaeedP

mt-5 or pl-4

But it isn't working well for me.

Accroding to your description,do you have add boostrap4 link? 

Could you post your codes to us?It will help us to solve your problems.

Since you don't post your codes,I create a demo.Just like this:

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

<div class="mt-5 ml-4" style="width: 1900px; background-color: aquamarine; height: 200px; text-align: center;">
     This is top!
</div>
<div class="ml-4 pl-4" style="width:200px;background-color:cadetblue;height:800px;text-align:center;">
     This is left!
</div>

Result:

More details,you could refer to below article:

https://getbootstrap.com/docs/4.0/utilities/spacing/

Best regards,

Yijing Sun

Answer 2

User-1151440187 posted

For extra small devices i.e. xs: 

{property}{sides}-{size} ex:- pl-5.

For other devices/viewports (small, medium, large and extra large):

{property}{sides}-{breakpoint}-{size} ex:- pl-md-4.

See here : https://jsfiddle.net/sfx2v5e4/1/

Hope it'll help.

Thanks!

Answer 3

User887623398 posted

Could you post your codes to us?It will help us to solve your problems.

Thanks for the reply.

I use blazor. It adds automatically bootstrap to the project.

Here comes my code:

<div class="container-fluid">
    
    <div class="row">
        <div class="col" style=" padding: 0; width: 100%;">

            <img class="img-fluid" src="image/bgImage5.jpg" style="width: 100%; height:auto;z-index:1; ;">
            <div class="container"  style="z-index:2; ;  padding: 0; width: 100%;  ">
                
                
                <h1 >hgjhkjh;klj;lkj;l</h1>

            </div>

           
        </div>

    </div>

</div>

Answer 4

User1535942433 posted

Hi SaeedP,

Accroding to your description and codes,I don't understand your requirment clearly.

Could you tell us what is the top and the left?Where do you use the mt- and pl-?

Could you post your current result and sample which you require to us?

I have create a test in Blazor and it works.Just like this:

<div class="container-fluid">
    <div class="row">
        <div class="col" style=" padding: 0; width: 100%;">
            <img class="img-fluid mt-5 ml-4" src="image/bgImage5.jpg" style="width:100%; height:auto;z-index:1; ;">
            <div class="container ml-4 pl-4"  style="z-index:2; ;  padding: 0; width: 100%;  ">
                <h1 >hgjhkjh;klj;lkj;l</h1>
            </div>
        </div>
    </div>
</div>

Best regards,

Yijing Sun

Answer 5

User887623398 posted

Consider The h1 div has an absolute position.

And I need the h1 to stand on the image and in the middle of it.

Answer 6

User887623398 posted

Thanks for all replyes.

I found the solution. That is:

<div class="container-fluid">
    
    <div class="row">
        <div class="col" style="padding: 0; ; width: 100%;">

           
            <div class="container"  style="z-index:2; ; padding: 0; width: 80%; left: 50%; top:50%; transform: translate(-50%,-50%);">
                
                    

               
                <h1 style="text-align:center;">fhgjkhjkhklhjlk</h1>

                

            </div>

            <img class="img-fluid" src="image/bgImage5.jpg" style="width: 100%; height: auto; z-index: 1; ;">

           

           
        </div>

    </div>

</div>