Hello,
I've setup a View with bootstrap grid to adapt the column count relative to the the screen size being used. However, when viewing the grid on a large screen, I would like the column count to be 5 (not 6 as shown). I know 12 columns is not divisible by 5, but I've seen other grids function this way. Can you help instruct me on how to accomplish this?
Noman
Supporter
Languages:
English (English )
Timezone:
Asia/Karachi (GMT+05:00)
Hi Brent,
Thank you for contacting Toolset support. Here is basic HTML structure for creating 5 column layout.
<html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="<em><u>hidden link</u></em>">
<style type="text/css">
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
.inner{
background:yellow;
margin-bottom:20px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-5ths col-sm-3 col-xs-6">
<div class="inner">This is column 1</div>
</div>
<div class="col-md-5ths col-sm-3 col-xs-6">
<div class="inner">This is column 2</div>
</div>
<div class="col-md-5ths col-sm-3 col-xs-6">
<div class="inner">This is column 3</div>
</div>
<div class="col-md-5ths col-sm-3 col-xs-6">
<div class="inner">This is column 4</div>
</div>
<div class="col-md-5ths col-sm-3 col-xs-6">
<div class="inner">This is column 5</div>
</div>
</div>
</body>
</html>
You can use following CSS in your custom css file and then use ‘col-xs-5ths’ class in your html as using in above HTML:
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
For more info:https://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap
Thank you
This solution works perfectly. Thanks for your help.
Would you happen to know how to make each row equal height, and match the heigh of the tallest grid item within each row?
I can set a height value with css for the grid item, but I'd prefer the grid to automatically adapt the the height of the tallest item in each row.
Noman
Supporter
Languages:
English (English )
Timezone:
Asia/Karachi (GMT+05:00)
Hello Brent,
Yes, it is possible but this is a separate issue so please kindly open a new ticket for this 2nd issue and we would be happy to help. This will help other users with similar problems to find solutions when searching the forum, We do not handle multiple issues in the same ticket as per support policy. https://toolset.com/toolset-support-policy/
Also, in the new ticket please share front page link where you need the equal height to each row.
Thank you
Thanks, Norman.
I'll start another ticket for the 2nd question.
