CODEWITHSUNDEEP
htmlcssbootstrap-4
KShiroko
KShiroko

Reputation: 69

How to do fullscreen slanted line in bootstrap

I am trying to create a slanted line that will extend to the whole page. But currently the line have tiny gap on the left and right margin.

Html :

    <div class="container-fluid">   
  <div class="row shine">
        <div class="col-lg-7 shine-content text-center">
            <h3>No.1 Bestseller</h3>
            <h1>Rouge Volupte Shine</h1>
            <p>Satin finish. Iconic lipstick. Highly pigmented. A wardrobe of iconic colors that symbolises audacious feminine strength.</p>
    </div>
      
        <div class="col-lg-5 shine-img d-flex justify-content-center px-5">
        
        </div>
    </div>
    
    <hr>
    
<div class="container-fluid">       
    <div class="row rouge">
        <div class="col-lg-6 rouge-img d-flex justify-content-center px-5">
      
          
        <div class="col-lg-6 rouge-content text-center">
            <h1>Rouge Pur Couture</h1>
            <p>In just one stroke, luxurious and highly pigmented colour dresses the lips with a radiant satin finish. Rouge Pur Couture delivers the promise of edgy style and ultimate feminine strength. </p>

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

CSS:

hr{
    margin:100px 0;
    border: 0;
    border-top: 2px solid #777777;
    position: relative;
    transform: rotate(-5deg)
}

https://codepen.io/jl-joey/pen/OJXdGJP

Upvotes: 0

Views: 85

Answers (2)

Tariq Murtuza
Tariq Murtuza

Reputation: 96

In your CSS file give margin:0 ; padding: 0 to your body tag like below: body{margin: 0;padding: 0;}

and for your hr tag style include the margin 100px -5px}

hr {margin: 100px -5px; rest your previous style}

Note: you can change margin right and left value from -5px as per your required size.

Upvotes: 1

Red Wing Justice Chan
Red Wing Justice Chan

Reputation: 159

The reason is there is a margin of body which is setted by defauly browser. Therefore here is the solution. Set body margin be 0px, and scale a little bit of the line and then set the container-fluid overflow being hidden.

hr{
    margin:100px 0;
    border: 0;
    border-top: 2px solid #777777;
    position: relative;
    transform: rotate(-5deg) scale(1.05);
    
}   
body{
  margin:0px;
}
.container-fluid{
  overflow:hidden;
}
<div class="container-fluid">   
  <div class="row shine">
        <div class="col-lg-7 shine-content text-center">
            <h3>No.1 Bestseller</h3>
            <h1>Rouge Volupte Shine</h1>
            <p>Satin finish. Iconic lipstick. Highly pigmented. A wardrobe of iconic colors that symbolises audacious feminine strength.</p>
            
        
        </div>
      
        <div class="col-lg-5 shine-img d-flex justify-content-center px-5">
        
        </div>
    </div>
    
    <hr>
    
<div class="container-fluid">       
    <div class="row rouge">
        <div class="col-lg-6 rouge-img d-flex justify-content-center px-5">
      
          
        <div class="col-lg-6 rouge-content text-center">
            <h1>Rouge Pur Couture</h1>
            <p>In just one stroke, luxurious and highly pigmented colour dresses the lips with a radiant satin finish. Rouge Pur Couture delivers the promise of edgy style and ultimate feminine strength. </p>
            
        
        </div>
    </div>
</div>

Upvotes: 1

Related Questions