Problem with Container-fluid of bootstrap 4 with images

Question

Problem with Container-fluid of bootstrap 4 with images

Navigation

#1 by (6 votes)
#2 by (1 votes)

4

When I place an image inside a <div class="container-fluid"> the image always comes up with a small margin on the left, if it is assumed that the container-fluid does not contain margins. The only way I can not show up is by not placing the bootstrap class.

I put a simple code

<!doctype html>
<html lang="en">
  <head>
    <title>Imagen 1</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <div class="container-fluid">
        <img src="http://cursosformacionseguros.com/wp-content/uploads/2017/01/fondoAtenci%C3%B3n-y-fidelizaci%C3%B3n-de-clientes-en-redes-sociales-en-seguros.-Social-CRM-y-social-loyalty-en-seguros.jpg" class="img-fluid" alt="">
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

It's a simple code, but I've done it in other pages and the only solution as I said before is removing the bootstrap class

html5 html css3 css bootstrap

asked by Victor Escalona 16.03.2018 в 04:54

source

2 answers

1

Well, a while ago, I've been fighting with something very similar, in a container-fluid I found a horizontal scroll, I've been testing and everything came from margin of 15px left and right. My structure was this:

<div class="container-fluid">
    <row>
        <col-sm-6></col-sm-6>
        <col-sm-6></col-sm-6>
    </row>
</div>

The margins only came out when you put the cabbage in that structure, so solve it by putting the following class in the row:

.reset-margin { margin-left: 0; margin-right: 0; }

answered by 18.03.2018 в 04:14

How can I disable the points '.' and commas ',' in a text entry? How to select several records with Checkbox?

score 6 · Accepted Answer

Class container-fluid as such does not include margins but yes includes padding:

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Interestingly, the official Bootstrap documentation suggests DO NOT use either .container or .container-fluid if you want to occupy the full width of the viewport. Source

Finally it is suggested to maintain the structure of rows and columns typical of Bootstrap, in the example I use the flexbox grid

<!doctype html>
<html lang="en">
  <head>
    <title>Imagen 1</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <div>
        <div class="row no-gutters">
          <div class="col-sm">
            <img src="http://cursosformacionseguros.com/wp-content/uploads/2017/01/fondoAtenci%C3%B3n-y-fidelizaci%C3%B3n-de-clientes-en-redes-sociales-en-seguros.-Social-CRM-y-social-loyalty-en-seguros.jpg" class="img-fluid" alt="">
          </div>
        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>