Bootstrap white space between boxes
Question
I'm new on bootstrap trying to improve my skills, i just got stuck, i have 6 boxes, three left side and three right side, my question is why there is space between box number '4' and '5' when i'm on 'sm, md,lg' sizes ? how can i put box number 5 under box number 4 without blank space ? and is there away to take away those 'white space' and still make this work like this ?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .box{ width:30%; height:250px; border: solid black 1px; } .boxx{ width:100px; height:100px; border: solid white 1px; } .bo{ width:50%; height:550px; border: solid black 1px; } * { box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing -moz-box-sizing: border-box; } </style> </head> <body> <body> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="boxx mx-auto"> white space </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="box mx-auto"> 2 </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="bo mx-auto"> 3 </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="box mx-auto"> 4 </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="boxx mx-auto"> white space </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <div class="box mx-auto"> 5 </div> </div> </div> </body> </html> </body> </html>
1 answers
solution1
1 2019-03-07 17:00:45
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .box{ width:30%; height:250px; border: solid black 1px; } .bo{ width:50%; height:550px; border: solid black 1px; } * { box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing -moz-box-sizing: border-box; } </style> </head> <body> <div class="row"> <div class="col-md-6"> </div> <div class="col-md-6"> <div class="box mx-auto"> 2 </div> </div> <div class="col-md-6"> <div class="bo mx-auto"> 3 </div> </div> <div class="col-md-6"> <div class="box mx-auto"> 4 </div> <div class="box mx-auto"> 5 </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to add space between content boxes in Bootstrap
White space between jumbotron and column divs (bootstrap)
White space between slides bootstrap carousel
How to add a white space between each column boxes
How to make space between two text boxes in bootstrap
Bootstrap side white space
Removing white space bootstrap
White space tabs in bootstrap
Large white-space between first and second Bootstrap table column
Bootstrap navigation pills have extra white space between them
Related Tags