How to remove this margin with bootstrap ? I already used m-0 but it doesn’t work

Asked

Viewed 35 times

0

How can I remove this right edge in the div of the images and in the div of the container ? I’m using the bootstrap 4.6, I tried to use the m-0, but it applies to all content, except in the right margin, and even inspecting element shows that there is no right margin. I need to occupy all the space of the div with the images, they are different images, I used those only to represent.

<html>
<head>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

</head>


<body> 
<div class="container m-0"> <!-- Inicio Div escolas -->
        <div class="row">
            <div class="col m-0 p-0" style="border:1px solid red;">
                <a href="#">
                    <span>
                        <img class="" src="https://www.pportodosmuseus.pt/wp-content/uploads/2018/10/plaka_porto-300x197.jpg" alt=""> 
                    </span>
                </a>
            </div>
            <div class="col m-0 p-0" style="border:1px solid red;">  
                <a href="#">
                    <span>
                        
                        <img class="" src="https://www.pportodosmuseus.pt/wp-content/uploads/2018/10/plaka_porto-300x197.jpg" alt=""> 
                    </span>
                </a>
            </div>
            <div class="col m-0 p-0" style="border:1px solid red;">
                <a href="#">
                    <span>
                        
                       <img class="" src="https://www.pportodosmuseus.pt/wp-content/uploads/2018/10/plaka_porto-300x197.jpg" alt=""> 
                    </span>
                </a>
            </div>
            <div class="col m-0 p-0" style="border:1px solid red;">
                <a href="#">
                    <span>
                        
                       <img class="" src="https://www.pportodosmuseus.pt/wp-content/uploads/2018/10/plaka_porto-300x197.jpg" alt=""> 
                    </span>
                </a>
            </div>
            <div class="col m-0 p-0" style="border:1px solid red;">
                <a href="#">
                    <span>
                        
                         <img class="" src="https://www.pportodosmuseus.pt/wp-content/uploads/2018/10/plaka_porto-300x197.jpg" alt=""> 
                    </span>
                </a>
            </div>
            
            

        </div>

    </div> <!-- Fim Div escolas -->
 </body>
</html>

html css twitter-bootstrap

  • You want to take up 100% of the width that’s it?

1 answer

0

<html>
<head>
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

</head>


<body> 
<div class="container m-0"> <!-- Inicio Div escolas -->
        <div class="row">
            <div class="col-12 m-0 p-0" style="border:1px solid red;">
                <a href="#">
                    <span>
                        <img class="w-100"src="https://www.pportodosmuseus.pt/wp-content/uploads/2018/10/plaka_porto-300x197.jpg" alt=""> 
                    </span>
                </a>
            </div>
            <div class="col-12 m-0 p-0 " style="border:1px solid red;">  
                <a href="#">
                    <span>
                        
                        <img class="w-100" style="width: 100%" src="https://www.pportodosmuseus.pt/wp-content/uploads/2018/10/plaka_porto-300x197.jpg" alt=""> 
                    </span>
                </a>
            </div>
            <div class="col-12 m-0 p-0" style="border:1px solid red;">
                <a href="#">
                    <span>
                        
                       <img class="w-100" style="width: 100%" src="https://www.pportodosmuseus.pt/wp-content/uploads/2018/10/plaka_porto-300x197.jpg" alt=""> 
                    </span>
                </a>
            </div>
            <div class="col-12 m-0 p-0" style="border:1px solid red;">
                <a href="#">
                    <span>
                        
                       <img class="w-100" style="width: 100%" src="https://www.pportodosmuseus.pt/wp-content/uploads/2018/10/plaka_porto-300x197.jpg" alt=""> 
                    </span>
                </a>
            </div>
            <div class="col-12 m-0 p-0" style="border:1px solid red;">
                <a href="#">
                    <span>
                        
                         <img class="w-100" style="width: 100%" src="https://www.pportodosmuseus.pt/wp-content/uploads/2018/10/plaka_porto-300x197.jpg" alt=""> 
                    </span>
                </a>
            </div>
            
        </div>

    </div> <!-- Fim Div escolas -->
 </body>
</html>

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.