Remove standard container space

Asked

Viewed 1,548 times

0

I’m performing a style modification within my #div1, but she is inside a container, so the stylization doesn’t take the whole field, it’s as if the div did not occupy the whole field, there are left and right bank in the two, I tried to move margin and padding, but without success. Following illustrative photo:

inserir a descrição da imagem aqui

.borda{
  border:1px solid black;
}
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>

<body>
<div class="container borda col-8 col-sm-8 col-md-8 col-lg-8 d-flex justify-content-center">
  <div  class="borda div1 pt-3  justify-content-start col-4 col-sm-4 col-md-4 col-lg-4">
    <form>
      <div class="form-group row">
        <input class="div1 form-control" type="text" placeholder="Nome" name="nome" required>
      </div>
      <div class="form-group row">
        <input class="div1 form-control" type="text" placeholder="Profissão" name="profissao" required>
      </div>
    </form>
  </div>
  <div id="redessociaisdiv" class="pt-3 justify-content-start col-8 col-sm-8 col-md-8 col-lg-8">
  <form>
    <div class="pt-4 col-5 col-sm-5  d-inline-flex col-md-5 col-lg-5">
      <img src="img/facebookverde.png" width=40px; height=100%;>
    <div class="form-group">
       <input class="form-control" type="text" placeholder="Facebook" name="facebook" required>
    </div>
  </div>
  <div class="col-5 col-sm-5 align-self-center d-inline-flex col-md-5 col-lg-5">
    <img src="img/instagramverde.png" width=40px; height=100%;>
    <div class="form-group">
      <input class="form-control" type="text" placeholder="Instagram" name="instagram" required>
    </div>
  </div>
  </form>
</div>
</div>
</body>

html css div

  • There is no #div1 in your code. There is a class . div1

2 answers

1

In Bootstrap just use the class .no-gutters in the container or row, or put m-0 the element that wants to draw the margins, or p-0 where you want to take the padding.

See what the documentation says: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

The gutters between Columns in our Predefined grid classes can be Removed with .no-gutters. This removes the Negative margins from .row and the horizontal padding from all immediate.

Here’s a suggested example:

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

And here is the definition of what the CSS of no-gutters

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

0

Just add this code to the CSS.

.container {
  padding: 0;
}

For it is the <div> with class container who has the padding and not the <div> classy borda worth remembering that you are working with bootstrap so you’re working with a css code already configured so that’s why this was happening.

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <style>

    .container {
      padding: 0;
    }

  </style>
</head>

<body>
<div class="container borda col-8 col-sm-8 col-md-8 col-lg-8 d-flex justify-content-center border">
<div  class="borda div1 pt-3  justify-content-start col-4 col-sm-4 col-md-2 col-lg-4">
  <form>
    <div class="form-group row">
      <input class="div1 form-control" type="text" placeholder="Nome" name="nome" required>
    </div>
    <div class="form-group row">
      <input class="div1 form-control" type="text" placeholder="Profissão" name="profissao" required>
    </div>
  </form>
</div>
<div id="redessociaisdiv" class="pt-3 justify-content-start col-8 col-sm-8 col-md-8 col-lg-8">
<form>
  <div class="pt-4 col-5 col-sm-5  d-inline-flex col-md-5 col-lg-5">
    <img src="img/facebookverde.png" width=40px; height=100%;>
  <div class="form-group">
     <input class="form-control" type="text" placeholder="Facebook" name="facebook" required>
  </div>
</div>
<div class="col-5 col-sm-5 align-self-center d-inline-flex col-md-5 col-lg-5">
  <img src="img/instagramverde.png" width=40px; height=100%;>
  <div class="form-group">
    <input class="form-control" type="text" placeholder="Instagram" name="instagram" required>
  </div>
</div>
</form>
</div>
</div>
</body>

Browser other questions tagged html css div

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