{"id":2303,"date":"2016-08-21T12:46:03","date_gmt":"2016-08-21T12:46:03","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2303"},"modified":"2023-11-15T13:18:24","modified_gmt":"2023-11-15T13:18:24","slug":"bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/","title":{"rendered":"Bootstrap 3 Grid Columns: A plug-in for Same Height Columns Layout"},"content":{"rendered":"

The Bootstrap grid columns plug-in<\/strong><\/h3>\n

The Bootstrap grid system enables to create the columns with equal width quite easily. For example, if you need three three-column layouts then you may use three div elements with .col-md-4<\/em> class (in each div). \u00a0If four columns in a row are required then you may use .col-md-3<\/em> class. Just distribute 12 12-column grid for developing the layout.<\/p>\n

As Bootstrap is a\u00a0mobile-first platform, the columns will adjust automatically in mobile phones or tablets.<\/p>\n

So, achieving an equal width of columns in a row in the Bootstrap-based project is not the issue. However, if you want all the columns to have the same height as well, you need to manage this by custom CSS.<\/p>\n

What if you need to have the same height for all columns in each row? In this tutorial, I am going to share a light-weight jQuery-based plugin that does this job for you.<\/p>\n

It only requires adding a class (grid-columns) in the row where you want columns with the same height. The following section explains how. You may also see the live demonstration.<\/p>\n

A demo of Bootstrap grid columns plug-in<\/strong><\/h3>\n

In this demo, I have created three rows with different number of columns. The first row contains four columns by using the col-md-3 class<\/strong><\/em> in each row. The second row is assigned the col-md-8 and col-md-4<\/em> classes while the third row is assigned col-md-6<\/em>.<\/p>\n

For demonstration, the content in various div elements is kept different to show how height is adjusted.<\/p>\n

\"bootstrap<\/p>\n

The markup:<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.0\/css\/bootstrap.min.css\">\r\n        <style>\r\n            .col {\r\n                margin-bottom: 30px;\r\n            }\r\n            .col>div {\r\n                background-color: #eee;\r\n                height: 100%;\r\n                padding: 10px;\r\n                border-radius: 6px;\r\n                border: 1px solid #aaa;\r\n            }\r\n        <\/style>\r\n\r\n<\/head>\r\n<body>     \r\n\r\n        <div class=\"container\">\r\n            \r\n            <h1>A demo of same Columns height<\/h1>\r\n            \r\n            <div class=\"alert alert-danger\">The columns will adjust automatically in mobile and tablets<\/div>\r\n            \r\n            <div class=\"row grid-columns\">\r\n                <div class=\"col-md-3 col\">\r\n                    <div>\r\n                        <b>1<\/b>\r\n                        The column 1 with col-md-3\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-md-3 col\">\r\n                    <div>\r\n                        <b>2<\/b>\r\n                        The column 2 with col-md-3\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-md-3 col\">\r\n                    <div>\r\n                        <b>3<\/b>\r\n                        The column 3 with col-md-3<br \/>\r\n                        The column 3 with col-md-3\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-md-3 col \">\r\n                    <div>\r\n                        <b>4<\/b>\r\n                        The column 4 with col-md-3.<br \/>\r\n                        <ul>\r\n                          <li>List item 1<\/li>\r\n                          <li>List item 2<\/li>\r\n                          <li>List item 3<\/li>\r\n                          <li>List item 4<\/li>\r\n                        <\/ul>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"row grid-columns\">\r\n                <div class=\"col-md-8 col\">\r\n                    <div>\r\n                        <b>1<\/b>\r\n                        The column 4 with col-md-8\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-md-4 col\">\r\n                    <div>\r\n                        <b>2<\/b>\r\n                        <ul>\r\n                          <li>List item 1<\/li>\r\n                          <li>List item 2<\/li>\r\n                          <li>List item 3<\/li>\r\n                          <li>List item 4<\/li>\r\n                        <\/ul>\r\n                    <\/div>\r\n             <\/div>\r\n\r\n            <div class=\"row grid-columns\">\r\n                <div class=\"col-md-6 col\">\r\n                    <div>\r\n                        <b>1<\/b>\r\n                        The column 4 with col-md-6.\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"col-md-6 col\">\r\n                    <div>\r\n                        <b>2<\/b>\r\n                        <ul>\r\n                          <li>List item 1<\/li>\r\n                          <li>List item 2<\/li>\r\n                          <li>List item 3<\/li>\r\n                          <li>List item 4<\/li>\r\n                        <\/ul>\r\n                    <\/div>\r\n             <\/div>\r\n\r\n\r\n            <\/div>\r\n            \r\n        <\/div>\r\n        \r\n    \r\n        <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\r\n        <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\" integrity=\"sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS\" crossorigin=\"anonymous\"><\/script>\r\n        <script src=\"js\/bootstrap-grid-columns\/bootstrap-grid-columns.js\"><\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
A simple CSS class is also used in the <style> section.<\/p>\n
For setting up this plug-in, simply download it from the Github page here<\/a>. After that, include the bootstrap-grid-columns.js<\/em> file after the references of Bootstrap and jQuery JS files:<\/p>\n
<script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js”><\/script><\/p>\n
<script src=”https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js” integrity=”sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS” crossorigin=”anonymous”><\/script><\/p>\n
<script src=”js\/bootstrap-grid-columns\/bootstrap-grid-columns.js”><\/script>\n<\/p><\/div>\n
In the markup, simply use the grid-columns class in a div where the\u00a0.row<\/em> class is used.<\/p>\n
What if the\u00a0grid-columns class is not used?<\/strong><\/h3>\n
See this demo where I have created three rows again. The third row is without the grid-columns<\/em> class.<\/p>\n
\"bootstrap<\/p>\n
<\/h6>\n
You can see that the third row\u2019s column height is varied, depending on the content.<\/p>\n","protected":false},"excerpt":{"rendered":"
The Bootstrap grid columns plug-in The Bootstrap grid system enables to create the columns with equal width quite easily. For example, if you need three three-column layouts then you may use three div elements with .col-md-4 class (in each div). \u00a0If four columns in a row are required then you may use .col-md-3 class. Just … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2304,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"yoast_head":"\nBootstrap 3 Grid Columns: A plug-in for Same Height Columns Layout<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap 3 Grid Columns: A plug-in for Same Height Columns Layout\" \/>\n<meta property=\"og:description\" content=\"The Bootstrap grid columns plug-in The Bootstrap grid system enables to create the columns with equal width quite easily. For example, if you need three three-column layouts then you may use three div elements with .col-md-4 class (in each div). \u00a0If four columns in a row are required then you may use .col-md-3 class. Just ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-21T12:46:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-15T13:18:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/58.0_1-bootstrap-grid.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"977\" \/>\n\t<meta property=\"og:image:height\" content=\"559\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/\",\"url\":\"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/\",\"name\":\"Bootstrap 3 Grid Columns: A plug-in for Same Height Columns Layout\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-08-21T12:46:03+00:00\",\"dateModified\":\"2023-11-15T13:18:24+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap 3 Grid Columns: A plug-in for Same Height Columns Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap 3 Grid Columns: A plug-in for Same Height Columns Layout","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap 3 Grid Columns: A plug-in for Same Height Columns Layout","og_description":"The Bootstrap grid columns plug-in The Bootstrap grid system enables to create the columns with equal width quite easily. For example, if you need three three-column layouts then you may use three div elements with .col-md-4 class (in each div). \u00a0If four columns in a row are required then you may use .col-md-3 class. Just ... Read more","og_url":"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/","article_published_time":"2016-08-21T12:46:03+00:00","article_modified_time":"2023-11-15T13:18:24+00:00","og_image":[{"width":977,"height":559,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/58.0_1-bootstrap-grid.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/","url":"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/","name":"Bootstrap 3 Grid Columns: A plug-in for Same Height Columns Layout","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-08-21T12:46:03+00:00","dateModified":"2023-11-15T13:18:24+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/bootstrap-grid-columns-a-plug-in-for-same-height-columns-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap 3 Grid Columns: A plug-in for Same Height Columns Layout"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2303"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2303"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2303\/revisions"}],"predecessor-version":[{"id":11351,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2303\/revisions\/11351"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2304"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}