<div class=\"row\">
<div class=\"col-md-10 col-xl-8\"><\/div>
<\/div><\/code><\/pre>\n\n\n\nThe above code would render differently based on the device type (click to enlarge):<\/p>\n\n\n\n\n![](\"\/techblog\/images\/boot_basics\/thumbgrid1.png\"\/)
<\/a><\/figure>\n\n\n\n![](\"\/techblog\/images\/boot_basics\/thumbgrid2.png\"\/)
<\/a><\/figure>\n\n\n\n![](\"\/techblog\/images\/boot_basics\/grid3.png\"\/)
<\/a><\/figure>\n\n\n\n![](\"\/techblog\/images\/boot_basics\/grid4.png\"\/)
<\/a><\/figure>\n<\/figure>\n\n\n\nExtra Small (col-*)<\/strong> — Smartphones in portrait mode (<576px). This is the default and no size prefix is needed. When not specified, the width will default to the full 12 columns. Because I did not specify a column size, my element would use the full screen width on a smartphone.
Small (col-sm-*)<\/strong> — Smartphones in landscape mode (\u2265576px). Bootstrap responsiveness assumes a greater-than-or-equal-to approach when using column sizes. Because I did not specify a width for this size, small (sm) screens (landscape smartphones) would inherit the previously set width (the default 12 columns).
Medium (col-md-*)<\/strong> — Tablets in portrait mode (\u2265768px). Setting the column size to 10 for medium (md) devices would take up 10-of-12 sections.
Large (col-lg-*)<\/strong> — Tablets in landscape mode (\u2265992px). Because I did not specify a size for large (lg) screens, the width will inherit the size from the previously set width (10 columns from medium).
Extra Large (col-xl-*)<\/strong> — Desktops\/Laptops (\u22651200px). Setting the column size to 8 for extra large (xl) devices will use 8-of-12 sections.<\/p>\n\n\n\nPlease visit the Bootstrap documentation about the Grid System<\/a> for more details.<\/p>\n\n\n\n2. Spacing<\/h3>\n\n\n\n
While the Bootstrap templates come pre-styled, many of my new elements benefited from custom spacing. Bootstrap’s easy spacing classes for margin and padding made this a breeze.<\/p>\n\n\n\n![\"\"\/](\"\/techblog\/images\/boot_basics\/spacing1.png\")
<\/figure>\n\n\n\nBecause most smartphone devices will have elements stack vertically you may want extra spacing on xs screen sizes, but no spacing on all other sizes.<\/p>\n\n\n\n![\"\"\/](\"\/techblog\/images\/boot_basics\/spacing2.png\")
<\/figure>\n\n\n\nTherefore, you may use the following:<\/p>\n\n\n\n
<div class=\"mb-3 mb-sm-0\"><\/div><\/code><\/pre>\n\n\n\nThe ‘mb-3’ class results in a bottom (b) margin (m) of 3. The ‘mb-sm-0’ class will have no bottom margin on screen widths small and up.<\/p>\n\n\n\n
Notice, the ‘mb-3’ class does not specify a width size as no specification implies the default xs (smarthphone portrait) size. Also remember the responsive breakpoints assume a greater-than-or-equal-to relationship which is why I only need to specify the ‘sm’ size in the ‘mb-sm-0’ class. This means all devices above xs will have no bottom margin.<\/p>\n\n\n\n
Please visit the Bootstrap documentation for more details regarding spacing classes<\/a>.<\/p>\n\n\n\n3. Justifying and Aligning Content<\/h3>\n\n\n\n
Going right along with managing the spacing of my custom elements, I frequently needed to equally align my elements. Bootstrap made this possible by utilizing flexbox. Along with ‘d-flex’, the class ‘justify-content-center’, will automatically push the child elements to equal distances inside their container. By using the following code, I was able to equally justify the instruction text and the button of each row. Just as easy is the ability to vertically align the elements in each row with ‘align-items-*’.<\/p>\n\n\n\n
<div class=\"d-flex justify-content-between align-items-center\">><\/div><\/code><\/pre>\n\n\n\n![\"justify](\"\/techblog\/images\/boot_basics\/justify.png\")
<\/a><\/figure>\n\n\n\nPlease visit the Bootstrap documentation over the Justify Content<\/a> and Align Items<\/a> utilities for more details.<\/p>\n\n\n\n4. Hiding and Displaying<\/h3>\n\n\n\n
Another example of working with responsive breakpoints is the ability to conditionally display or hide elements based on screen size. Because you want to maximize your screen space, often you’ll hide elements on smaller devices and display them on larger screens. One instance I used this was the shopping cart amount in the header.<\/p>\n\n\n\n![\"\"\/](\"\/techblog\/images\/boot_basics\/header1.png\")
<\/figure>\n\n\n\nThere is not enough horizontal room on the header if I kept the ‘Current Cart’ text. As you can see below, the element would wrap.<\/p>\n\n\n\n![\"\"\/](\"\/techblog\/images\/boot_basics\/header2.png\")
<\/figure>\n\n\n\nAdding this code will hide the text on xs device widths and display on screen sizes medium and up.<\/p>\n\n\n\n
<div class=\"d-none d-md-inline\">Current Cart<\/div><\/code><\/pre>\n\n\n\nThe class ‘d-none’ will be read as do not display on xs devices, whereas ‘d-md-inline’ will display the element inline on screen sizes medium and greater.<\/p>\n\n\n\n![\"\"\/](\"\/techblog\/images\/boot_basics\/header3.png\")
<\/figure>\n\n\n\nNotice I used the same method for other aspects of the header. The banner text on the left displays differently on a smartphone as well as the ‘Home’ and ‘Sign Off’ links on the right-side.<\/p>\n\n\n\n
Please visit the Bootstrap documentation for more details regarding Displaying Elements<\/a> for more details.<\/p>\n\n\n\n5. Card Panels<\/h3>\n\n\n\n
The card component is a simple, built-in method of organizing your data into elegant containers. Cards are a great way of separating unique data groups onto the page.<\/p>\n\n\n\n![\"Cards\"\/](\"\/techblog\/images\/boot_basics\/card.png\")
<\/a><\/figure>\n\n\n\nm-Power has two approaches of inserting cards: Via the Form Layout mode<\/a> or the HTML toolbar<\/a> of the ‘insert element’ feature in m-Painter.<\/p>\n\n\n\nPlease visit the Bootstrap documentation for more details regarding Card Components<\/a>.<\/p>\n\n\n\nAnd many more…<\/h3>\n\n\n\n
The above are just a handful of the many Bootstrap features available. You can read the full Bootstrap documentation<\/a> for all other built-in Bootstrap classes. Additionally, there are countless other online tutorials and videos discussing Bootstrap. One simple and basic crash course can be found on this free 10 part guide on getting started with Bootstrap<\/a>.<\/p>\n\n\n\nPlease feel free to let us know of your favorite Bootstrap features and\/or tutorials.<\/p>\n","protected":false},"excerpt":{"rendered":"
Recently I was able to use m-Power’s new industry standard Bootstrap templates for a customer project. The goal of the project was to modernize their online shopping portal and make the site mobile friendly. These objectives served as a perfect fit for the new Bootstrap themed templates. While building the…<\/p>\n","protected":false},"author":10,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[154],"ht-kb-tag":[],"class_list":["post-10308","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-bootstrap"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10308"}],"version-history":[{"count":66,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10308\/revisions"}],"predecessor-version":[{"id":11928,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10308\/revisions\/11928"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10308"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=10308"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=10308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![](\"\/techblog\/images\/boot_basics\/grid1.png\")
<\/a><\/figure>\n\n\n\n