{"id":1455,"date":"2016-04-13T14:20:43","date_gmt":"2016-04-13T18:20:43","guid":{"rendered":"https:\/\/toddsantoro.com\/?p=1455"},"modified":"2016-04-13T14:20:43","modified_gmt":"2016-04-13T18:20:43","slug":"fixing-bootstrap-column-stacking","status":"publish","type":"post","link":"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/","title":{"rendered":"Fixing Bootstrap’s irregular column stacking"},"content":{"rendered":"

\"BootstrapI had a problem when displaying an unspecified number of logos on a site I was building using Bootstrap. The issue was on a smaller responsive screen I couldn’t use rows to clear the float and because some logos were taller than others sometimes there would be a “stair” effect going on. See in row two there are only two logos? This is caused because the first logo in row one is taller than the other two in that row.<\/p>\n

The Bootstrap Fix<\/h2>\n

I thought for a minute and decided to add a <div> tag to every 3rd element on small screens and every 4th element on larger screens with the Bootstrap .clearfix class. I then added .visable-xs and .visable-sm, .visable-md and .visable-lg on the respective <div> tags to make them appear and disappear depending on the media query.<\/p>\n

Check out the JSFiddle<\/a><\/p>\n

SHould you have another solution or a way to make this solution better please leave a comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"

I had a problem when displaying an unspecified number of logos on a site I was building using Bootstrap. The issue was on a smaller responsive screen I couldn’t use rows to clear the float and because some logos were taller than others sometimes there would be a “stair” effect going on. See in row two there are only two … Continued<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[86,61,68],"tags":[],"yoast_head":"\nFixing Bootstrap's irregular column stacking - Todd Santoro Designs<\/title>\n<meta name=\"description\" content=\"Bootstrap columns can stack irregular if you don't use rows to clear the float. This trick will always clear the float and give you perfect rows everytime.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Fixing Bootstrap's irregular column stacking - Todd Santoro Designs\" \/>\n<meta property=\"og:description\" content=\"Bootstrap columns can stack irregular if you don't use rows to clear the float. This trick will always clear the float and give you perfect rows everytime.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/\" \/>\n<meta property=\"og:site_name\" content=\"Todd Santoro Designs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/toddsantorodesigns\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-13T18:20:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/toddsantoro.com\/media\/Screenshot-2016-04-13-14.05.06-300x179.png\" \/>\n<meta name=\"author\" content=\"Todd Santoro\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@toddsantoro\" \/>\n<meta name=\"twitter:site\" content=\"@toddsantoro\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Todd Santoro\" \/>\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:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/\"},\"author\":{\"name\":\"Todd Santoro\",\"@id\":\"https:\/\/toddsantoro.com\/#\/schema\/person\/74587479a5bfa89372296f3aba9c37b1\"},\"headline\":\"Fixing Bootstrap’s irregular column stacking\",\"datePublished\":\"2016-04-13T18:20:43+00:00\",\"dateModified\":\"2016-04-13T18:20:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/\"},\"wordCount\":170,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/toddsantoro.com\/#organization\"},\"articleSection\":[\"Bootstrap\",\"Code\",\"Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/\",\"url\":\"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/\",\"name\":\"Fixing Bootstrap's irregular column stacking - Todd Santoro Designs\",\"isPartOf\":{\"@id\":\"https:\/\/toddsantoro.com\/#website\"},\"datePublished\":\"2016-04-13T18:20:43+00:00\",\"dateModified\":\"2016-04-13T18:20:43+00:00\",\"description\":\"Bootstrap columns can stack irregular if you don't use rows to clear the float. This trick will always clear the float and give you perfect rows everytime.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/toddsantoro.com\/#website\",\"url\":\"https:\/\/toddsantoro.com\/\",\"name\":\"Todd Santoro Designs\",\"description\":\"Web, Logo, Identity, Branding, Website Design in Key West, Florida and Columbus, Ohio\",\"publisher\":{\"@id\":\"https:\/\/toddsantoro.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/toddsantoro.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/toddsantoro.com\/#organization\",\"name\":\"ToddSantoro.com Designs\",\"url\":\"https:\/\/toddsantoro.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/toddsantoro.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/toddsantoro.com\/media\/todd-santoro-web-design-development-key-west-columbus-logo-twitter.png\",\"contentUrl\":\"https:\/\/toddsantoro.com\/media\/todd-santoro-web-design-development-key-west-columbus-logo-twitter.png\",\"width\":400,\"height\":400,\"caption\":\"ToddSantoro.com Designs\"},\"image\":{\"@id\":\"https:\/\/toddsantoro.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/toddsantorodesigns\",\"https:\/\/twitter.com\/toddsantoro\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/toddsantoro.com\/#\/schema\/person\/74587479a5bfa89372296f3aba9c37b1\",\"name\":\"Todd Santoro\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/toddsantoro.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e8c06ddb18265080a32e5b5974950708?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e8c06ddb18265080a32e5b5974950708?s=96&d=mm&r=g\",\"caption\":\"Todd Santoro\"},\"sameAs\":[\"https:\/\/toddsantoro.com\",\"https:\/\/twitter.com\/toddsantoro\"],\"url\":\"https:\/\/toddsantoro.com\/blog\/author\/todd\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Fixing Bootstrap's irregular column stacking - Todd Santoro Designs","description":"Bootstrap columns can stack irregular if you don't use rows to clear the float. This trick will always clear the float and give you perfect rows everytime.","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:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/","og_locale":"en_US","og_type":"article","og_title":"Fixing Bootstrap's irregular column stacking - Todd Santoro Designs","og_description":"Bootstrap columns can stack irregular if you don't use rows to clear the float. This trick will always clear the float and give you perfect rows everytime.","og_url":"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/","og_site_name":"Todd Santoro Designs","article_publisher":"https:\/\/www.facebook.com\/toddsantorodesigns","article_published_time":"2016-04-13T18:20:43+00:00","og_image":[{"url":"https:\/\/toddsantoro.com\/media\/Screenshot-2016-04-13-14.05.06-300x179.png"}],"author":"Todd Santoro","twitter_card":"summary_large_image","twitter_creator":"@toddsantoro","twitter_site":"@toddsantoro","twitter_misc":{"Written by":"Todd Santoro","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/#article","isPartOf":{"@id":"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/"},"author":{"name":"Todd Santoro","@id":"https:\/\/toddsantoro.com\/#\/schema\/person\/74587479a5bfa89372296f3aba9c37b1"},"headline":"Fixing Bootstrap’s irregular column stacking","datePublished":"2016-04-13T18:20:43+00:00","dateModified":"2016-04-13T18:20:43+00:00","mainEntityOfPage":{"@id":"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/"},"wordCount":170,"commentCount":0,"publisher":{"@id":"https:\/\/toddsantoro.com\/#organization"},"articleSection":["Bootstrap","Code","Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/","url":"https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/","name":"Fixing Bootstrap's irregular column stacking - Todd Santoro Designs","isPartOf":{"@id":"https:\/\/toddsantoro.com\/#website"},"datePublished":"2016-04-13T18:20:43+00:00","dateModified":"2016-04-13T18:20:43+00:00","description":"Bootstrap columns can stack irregular if you don't use rows to clear the float. This trick will always clear the float and give you perfect rows everytime.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/toddsantoro.com\/blog\/fixing-bootstrap-column-stacking\/"]}]},{"@type":"WebSite","@id":"https:\/\/toddsantoro.com\/#website","url":"https:\/\/toddsantoro.com\/","name":"Todd Santoro Designs","description":"Web, Logo, Identity, Branding, Website Design in Key West, Florida and Columbus, Ohio","publisher":{"@id":"https:\/\/toddsantoro.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/toddsantoro.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/toddsantoro.com\/#organization","name":"ToddSantoro.com Designs","url":"https:\/\/toddsantoro.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/toddsantoro.com\/#\/schema\/logo\/image\/","url":"https:\/\/toddsantoro.com\/media\/todd-santoro-web-design-development-key-west-columbus-logo-twitter.png","contentUrl":"https:\/\/toddsantoro.com\/media\/todd-santoro-web-design-development-key-west-columbus-logo-twitter.png","width":400,"height":400,"caption":"ToddSantoro.com Designs"},"image":{"@id":"https:\/\/toddsantoro.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/toddsantorodesigns","https:\/\/twitter.com\/toddsantoro"]},{"@type":"Person","@id":"https:\/\/toddsantoro.com\/#\/schema\/person\/74587479a5bfa89372296f3aba9c37b1","name":"Todd Santoro","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/toddsantoro.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e8c06ddb18265080a32e5b5974950708?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e8c06ddb18265080a32e5b5974950708?s=96&d=mm&r=g","caption":"Todd Santoro"},"sameAs":["https:\/\/toddsantoro.com","https:\/\/twitter.com\/toddsantoro"],"url":"https:\/\/toddsantoro.com\/blog\/author\/todd\/"}]}},"_links":{"self":[{"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/posts\/1455"}],"collection":[{"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/comments?post=1455"}],"version-history":[{"count":2,"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/posts\/1455\/revisions"}],"predecessor-version":[{"id":1458,"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/posts\/1455\/revisions\/1458"}],"wp:attachment":[{"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/media?parent=1455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/categories?post=1455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toddsantoro.com\/wp-json\/wp\/v2\/tags?post=1455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}