How to get 5 column grid width for Large screens?

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

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 support ticket is created vor 7 Jahren. There's a good chance that you are reading advice that it now obsolete.

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.

Heute stehen keine Supporter zur Arbeit im Werkzeugsatz-Forum zur Verfügung. Sie können gern Tickets erstellen, die wir bearbeiten werden, sobald wir online sind. Vielen Dank für Ihr Verständnis.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	12:00 – 17:00	-
-	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	18:00 – 21:00	-

Supporter timezone: Asia/Karachi (GMT+05:00)

Tags: Views, Views plugin

Dieses Thema enthält 4 Antworten, hat 2 Stimmen.

Zuletzt aktualisiert von Brent Urbanski vor 7 Jahren.

Assistiert von: Noman.

Author

Artikel

November 8, 2017 at 8:45 pm #587835

Brent Urbanski

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?

November 9, 2017 at 7:43 am #587893

Noman

Supporter

Sprachen: Englisch (English )

Zeitzone: 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>versteckter 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

November 10, 2017 at 4:02 pm #588652

Brent Urbanski

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.

November 10, 2017 at 4:47 pm #588666

Noman

Supporter

Sprachen: Englisch (English )

Zeitzone: 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

November 10, 2017 at 5:28 pm #588678

Brent Urbanski

Thanks, Norman.

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