{"id":313,"date":"2018-02-15T14:57:04","date_gmt":"2018-02-15T14:57:04","guid":{"rendered":"http:\/\/www.simon-li.com\/design-and-code\/?p=313"},"modified":"2021-12-21T16:49:09","modified_gmt":"2021-12-21T16:49:09","slug":"an-elegant-way-to-break-the-bootstrap-container","status":"publish","type":"post","link":"http:\/\/www.simon-li.com\/design-and-code\/an-elegant-way-to-break-the-bootstrap-container\/","title":{"rendered":"An Elegant Way to Break the Bootstrap Container"},"content":{"rendered":"

Carousels are a popular UI element. Unlike other elements that are often constrained by the main view, they often occupy the entire width of a page (the viewport), as can be seen from the following examples.<\/p>\n

\"\"
\n<\/p>\n

\"\"<\/p>\n

\"\"
Examples of carousels occupying the entire width of a page.<\/figcaption><\/figure>\n

Bootstrap is a popular responsive front-end framework for designing websites. Its 12-column grid system, which consists of containers<\/a>, rows and columns, provides a convenient structure for creating responsive webpages and has been widely used among web developers. Containers in Bootstrap center the contents of a page and add padding to both sides, thereby creating the main view of the page. However, it also prevents any content inside from extending beyond the padding. We want to put carousels inside the container for better organization and code structure, just like other UI elements. At the same time, we also want it to use up all the width of a page. In other words, is it possible for the carousel to break the container?<\/p>\n

There is actually an elegant method to do this, with the use of the CSS unit vw<\/em><\/a> and the function calc()<\/em><\/a>, and it works across all breakpoints for all devices. Play around with the following codepen here<\/a>.<\/p>\n

\"\"<\/a><\/p>\n

The red boxes can be seen as the regular contents placed inside the container, and the green box is breaking the container and extends to both the left and right sides of the page.<\/p>\n

Note that in the above code, the div<\/em> tag with the break-out class has a width of 100vw<\/em>. Since vw<\/em> represents 1% of the viewport width, 100vw<\/em> is the entire width of the viewport, which is the width of the browser window. Additionally, we need to move the div<\/em> tag to the left, that\u2019s why we set its position<\/em> property to relative<\/em> to make it move relative to its parent, which is the container. We also set its left<\/em> property to calc(-1 * (100vw – 100%) \/ 2)<\/em>, where 100%<\/em> is the width of the container, to make sure that there\u2019s no gap between the carousel and the viewport.<\/p>\n

This approaches works for any responsive breakpoints. With a few lines of CSS, we are breaking the bootstrap container in an clean and elegant way.<\/p>\n

Finally, vw<\/em> and calc()<\/em> are widely supported by browsers nowadays, as is shown in Can I use<\/a>, so it\u2019s pretty safe to use them without worrying about browser support.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"

Carousels are a popular UI element. Unlike other elements that are often constrained by the main view, they often occupy the entire width of a page (the viewport), as can be seen from the following examples.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[50,52,76],"class_list":["post-313","post","type-post","status-publish","format-standard","hentry","category-coding","tag-bootstrap","tag-css","tag-front-end"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":21,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/313\/revisions"}],"predecessor-version":[{"id":967,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/313\/revisions\/967"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=313"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}