Skip Navigation

[Resolved] How to get 5 column grid width for Large screens?

This thread is resolved. Here is a description of the problem and solution.

Problem: 5 Columns grid on a large screen, I would like the column count to be 5 (not 6 as shown). Can you help instruct me on how to accomplish this?

Solution: Solution here: https://toolset.com/forums/topic/how-to-get-5-column-grid-width-for-large-screens/#post-587893

Relevant Documentation: https://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 4 replies, has 2 voices.

Last updated by Brent Urbanski 4 years ago.

Assigned support staff: Noman.

Author
Posts
#587835
VIEW.png

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?

#587893

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

#588652

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.

#588666

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

#588678

Thanks, Norman.

I'll start another ticket for the 2nd question.