how to assign top and left for an absolute position element in bootstrap[Answered] RSS

• • Reply
  SaeedP

  Member

  21 Points

  245 Posts

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

  Aug 24, 2020 09:39 PM|SaeedP|LINK

  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

• • Reply
  yij sun

  Contributor

  3730 Points

  1431 Posts

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

  Aug 25, 2020 02:19 AM|yij sun|LINK

  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

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
• • Reply
  shaili shah

  Member

  115 Points

  99 Posts

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

  Aug 25, 2020 11:18 AM|shaili shah|LINK

  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!

  ASP.NET consulting companies india
  https://www.ifourtechnolab.com/asp-dot-net-enterprise-content-management
• • Reply
  SaeedP

  Member

  21 Points

  245 Posts

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

  Aug 25, 2020 03:21 PM|SaeedP|LINK

  yij sun

  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; position: relative;">
              <div class="container"  style="z-index:2; position: absolute;  padding: 0; width: 100%;  ">
                  
                  
                  <h1 >hgjhkjh;klj;lkj;l</h1>
  
              </div>
  
             
          </div>
  
      </div>
  
  </div>

• • Reply
  yij sun

  Contributor

  3730 Points

  1431 Posts

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

  Aug 26, 2020 06:44 AM|yij sun|LINK

  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; position: relative;">
              <div class="container ml-4 pl-4"  style="z-index:2; position: absolute;  padding: 0; width: 100%;  ">
                  <h1 >hgjhkjh;klj;lkj;l</h1>
              </div>
          </div>
      </div>
  </div>

  Best regards,

  Yijing Sun

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
• • Reply
  SaeedP

  Member

  21 Points

  245 Posts

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

  Aug 29, 2020 04:53 PM|SaeedP|LINK

  Consider The h1 div has an absolute position.

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

• • Reply
  SaeedP

  Member

  21 Points

  245 Posts

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

  Aug 29, 2020 05:45 PM|SaeedP|LINK

  Thanks for all replyes.

  I found the solution. That is:

  <div class="container-fluid">
      
      <div class="row">
          <div class="col" style="padding: 0; position: relative; width: 100%;">
  
             
              <div class="container"  style="z-index:2; position: absolute; 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; position: relative;">
  
             
  
             
          </div>
  
      </div>
  
  </div>