{"id":4546,"date":"2021-06-30T03:59:15","date_gmt":"2021-06-30T03:59:15","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=4546"},"modified":"2021-06-30T05:34:59","modified_gmt":"2021-06-30T05:34:59","slug":"how-to-create-equal-height-columns","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/","title":{"rendered":"How To Create Equal Height Columns"},"content":{"rendered":"

When you need columns to appear side by side, you will often want them to be of equal height.
\n\"Desire\"\/<\/p>\n

Htm5 Code:<\/h2>\n

<div class=\"row row-flex\">
\n <div class=\"col-md-4 col-sm-6 col-xs-12\" style=\u201dcolor:red;\u201d>
\n <div class=\"content\" style=\u201dheight:100px;\u201d>
\n <\/div>
\n <\/div>
\n <div class=\"col-md-4 col-sm-6 col-xs-12\" style=\u201dcolor:green;\u201d>
\n <div class=\"content\" style=\u201dheight:80px;\u201d>
\n <\/div>
\n <\/div>
\n <div class=\"col-md-4 col-sm-6 col-xs-12\" style=\u201dcolor:red;\u201d>
\n <div class=\"content colour-4\">
\n <\/div>
\n <\/div>
\n <div class=\"col-md-4 col-sm-6 col-xs-12\">
\n <div class=\"content colour-5\">
\n <h3>Fifth column<\/h3>
\n <p>Normal content.<\/p>
\n <\/div>
\n <\/div>
\n<\/div><\/code><\/p>\n

CSS3:<\/h3>\n

.row-flex {
\n display: flex;
\n flex-wrap: wrap;
\n}
\n.content {
\n height: 100%;
\n}<\/code><\/p>\n

This is a solution that works in all browsers that are supported by Bootstrap<\/a> 4.<\/p>\n

StudySection provides a big list of certification exams through its online platform. The French Certification Exam<\/a> can help you to certify your skills to communicate in the French language. Whether you are new to the language or you are an expert in it, this French certification exam can test the ability of anybody\u2019s command over the French language.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

When you need columns to appear side by side, you will often want them to be of equal height. Htm5<\/p>\n","protected":false},"author":1,"featured_media":4547,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[674,675],"acf":[],"yoast_head":"\nHow To Create Equal Height Columns - StudySection Blog<\/title>\n<meta name=\"description\" content=\"When you need columns to appear side by side, you will often want them to be of equal height. Here is a solution that works in most browsers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create Equal Height Columns - StudySection Blog\" \/>\n<meta property=\"og:description\" content=\"When you need columns to appear side by side, you will often want them to be of equal height. Here is a solution that works in most browsers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-30T03:59:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-30T05:34:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/06\/equal.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"How To Create Equal Height Columns\",\"datePublished\":\"2021-06-30T03:59:15+00:00\",\"dateModified\":\"2021-06-30T05:34:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/\"},\"wordCount\":101,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"CSS3\",\"Flexbox\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/\",\"url\":\"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/\",\"name\":\"How To Create Equal Height Columns - StudySection Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2021-06-30T03:59:15+00:00\",\"dateModified\":\"2021-06-30T05:34:59+00:00\",\"description\":\"When you need columns to appear side by side, you will often want them to be of equal height. Here is a solution that works in most browsers.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Create Equal Height Columns\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Create Equal Height Columns - StudySection Blog","description":"When you need columns to appear side by side, you will often want them to be of equal height. Here is a solution that works in most browsers.","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:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/","og_locale":"en_US","og_type":"article","og_title":"How To Create Equal Height Columns - StudySection Blog","og_description":"When you need columns to appear side by side, you will often want them to be of equal height. Here is a solution that works in most browsers.","og_url":"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2021-06-30T03:59:15+00:00","article_modified_time":"2021-06-30T05:34:59+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/06\/equal.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"How To Create Equal Height Columns","datePublished":"2021-06-30T03:59:15+00:00","dateModified":"2021-06-30T05:34:59+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/"},"wordCount":101,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["CSS3","Flexbox"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/","url":"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/","name":"How To Create Equal Height Columns - StudySection Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2021-06-30T03:59:15+00:00","dateModified":"2021-06-30T05:34:59+00:00","description":"When you need columns to appear side by side, you will often want them to be of equal height. Here is a solution that works in most browsers.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/how-to-create-equal-height-columns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Create Equal Height Columns"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":156,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4546"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=4546"}],"version-history":[{"count":3,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4546\/revisions"}],"predecessor-version":[{"id":4552,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/4546\/revisions\/4552"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/4547"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=4546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=4546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=4546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}