0

I am learning to model, and I am adding a div with the word "holi1", it is supposed that it should occupy 12 columns, that is to say the entire width of the container that has it. but I would like to know why it does not occupy 100% of the width. How can I correct it?

enter image description here

html,body{
 height:100%;
}
<body>
<div class="container h-100">
    <div class="row h-100 d-flex   justify-content-center align-items-center contenedor_centrado">
            <div class="row">
                <div class="col-12 col-md-12 botones_centrados d-flex align-items-center" style="border: 1px solid blue;">
                    holi1
                </div>                  
            </div>
    </div>
</div>
</body>

https://plnkr.co/edit/Xqxhs0Ggp1SSmk7226AV?p=preview

yavg
  • 2,761
  • 7
  • 45
  • 115
  • one of your other classes may be overriding – Dr Upvote Apr 21 '18 at 02:30
  • Not where I can fiddle with it, but often problems occur if you don't follow the bootstrap structure. Unlike most CSS you can't sprinkle classes anywhere. In this case I don't believe you can nest rows like that, you need a column between one of the rows or just get rid of one. Notice how rows columns alternate for nesting: https://stackoverflow.com/a/24661416/84206 – AaronLS Apr 21 '18 at 02:39
  • And as Fred mentioned might have some overrides. Start removing the extra classes not related to the bootstrap layout and work backwards in browser inspector turning off classes. If that fixes the issue you will have identified the conflict and can focus on that. – AaronLS Apr 21 '18 at 02:41

1 Answers1

1

You have two layers of "row" classes nested in each other. If you want to have both, then you need to add col-12 to the inner row to make it occupy the full width:

<body>
<div class="container h-100">
    <div class="row h-100 d-flex   justify-content-center align-items-center contenedor_centrado">
            <div class="row col-12">
                <div class="col-12 col-md-12 botones_centrados d-flex align-items-center" style="border: 1px solid blue;">
                    holi1
                </div>                  
            </div>
    </div>
</div>
</body>
Lubo Antonov
  • 2,301
  • 14
  • 18
  • should I also put col-md-12 etc ... too? – yavg Apr 21 '18 at 02:55
  • I had understood that the rows should not put the cabbage classes – yavg Apr 21 '18 at 02:56
  • cabbage classes? Do you mean column? It may not be the smartest thing to do in the long run, when your markup become more complicated, but it will work. All these classes are just hooks to apply CSS styling, so as long as the style rules don't conflict, it will work. – Lubo Antonov Apr 21 '18 at 03:16
  • If you have col-12, col-md-12 is redundant. You need to read more about how the breakpoints work in Bootstrap. – Lubo Antonov Apr 21 '18 at 03:18
  • Not a criticism but consideration: It's more "proper" to have row, column, row, column nesting rather than putting both a row and column class on a single element. The former is tested and supported by bootstrap, and the latter may be quirky in some scenarios. – AaronLS Apr 21 '18 at 03:40
  • @AaronLS Can you replicate my example with the best practice to understand you much better? I would appreciate it very much to learn more and to make myself more clear – yavg Apr 21 '18 at 03:42
  • @AaronLS I agree, I'm not advocating combining row and col classes. – Lubo Antonov Apr 21 '18 at 04:38
  • Don't have access to a desktop right now but basically you can have a single column between the two rows: http://getbootstrap.com/docs/4.0/layout/grid/#nesting – AaronLS Apr 21 '18 at 18:32