CODEWITHSUNDEEP
htmlcssbootstrap-4
Oli Ullah
Oli Ullah

Reputation: 161

My bootstrap container is not getting the full width. How to solve this problem?

I want all the images to get the full width. But I am getting some padding in right and left. How can I solve this problem? Here is the image of my page:enter image description here

Here is my HTML code:

<div class="container-fluid">
      
        <div class="col"><a href="about.html"><img style="object-position: 60% 0%;" src="images/Life/1.jpg" alt=""></a></div>
        <div class="col"><a href=""><img src="images/Life/3.jpg" alt=""></a></div>
        <div class="col"><a href=""><img src="images/Lakers/L1000857.JPG" alt=""></a></div>
        <div class="col"><a href=""><img src="images/Lakers/L1000883.JPG" alt=""></a></div>
        <div class="col"><a href=""><img src="images/Others/1.jpg" alt=""></a></div>
        <div class="col"><a href=""><img src="images/Others/2.jpg" alt=""></a></div>
        <div class="col"><a href=""><img style="object-position: 60% 0%;" src="images/About/About me.jpg" alt=""></a></div>
    </div>

and my CSS:

.container-fluid{
    padding: 0 !important;
    margin: 0  !important;
}
img{
    padding: 0 !important;
    margin: 0  !important;
    height: 350px;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    object-position: 60% 30%;

}

Upvotes: 2

Views: 437

Answers (1)

StepUp
StepUp

Reputation: 38094

col class by default has padding-left: 15px and padding-right: 15px. It can be removed by applying p-0 Bootstrap class:

<div class="container-fluid">

    <div class="col p-0"><a href="about.html"><img style="object-position: 60% 0%;" src="images/Life/1.jpg" alt=""></a>
    </div>
    <div class="col p-0"><a href=""><img src="images/Life/3.jpg" alt=""></a></div>
    <div class="col p-0"><a href=""><img src="images/Lakers/L1000857.JPG" alt=""></a></div>
    <div class="col p-0"><a href=""><img src="images/Lakers/L1000883.JPG" alt=""></a></div>
    <div class="col p-0"><a href=""><img src="images/Others/1.jpg" alt=""></a></div>
    <div class="col p-0"><a href=""><img src="images/Others/2.jpg" alt=""></a></div>
    <div class="col p-0"><a href=""><img style="object-position: 60% 0%;" src="images/About/About me.jpg" alt=""></a>
    </div>
  </div>

Read more about spacing here

Upvotes: 4

Related Questions