Menu
How do you equally divide a row in 5 columns in Bootstrap 4 where it has 12 columns total? Anyone knows?
240
You can use the row-cols-* (eg: row-cols-3 , row-cols-md-3 ) class for your requirement. Show activity on this post. You can use bootstrap-4 default 'col' property to solve this issue. This will auto divide the given space into 5 equal parts.
You can use col-md-* class for child element inside the parent row class to split the columns for your need.
Basic Structure of a Bootstrap 5 Grid First example: create a row ( <div class="row"> ). Then, add the desired number of columns (tags with appropriate . col-*-* classes).
Bootstrap 4 doesn't use floats like version 3 did so it can automatically space out your columns using just the col class. So for 5 equally spaced columns, just do this:
.col1 { background-color: red; } .col2 { background-color: green; } .col3 { background-color: blue; } .col4 { background-color: orange; } .col5 { background-color: brown; }<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col col1">Column 1</div> <div class="col col2">Column 2</div> <div class="col col3">Column 3</div> <div class="col col4">Column 4</div> <div class="col col5">Column 5</div> </div> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
