The CMS responsive grid

This page is specific to Drag and Drop Design Manager templates, which we do not recommend for new templates. Instead we recommend using Drag and Drop Areas, in HTML + HubL templates as those provide the best experience for both developers and marketers. Just to provide a starting point, we have an optional similar layout.css file in the CMS Theme Boilerplate which you can use to help transition.

HubSpot's drag and drop template layouts are built using a 12 column responsive-grid system. All drag and drop templates automatically include a minimal CSS file (layout.css) that makes the grid responsive across different screensizes. While the file is based on Bootstrap 2, it has been stripped down to include only the code that is necessary to make the rows and columns of your layout stack on mobile devices. You can learn more about layout.css, here.

This article includes a class map and explanation of a default HubSpot template layout, without any custom classes added.

You can download a responsive grid Photoshop file. This PSD contains grid guides for designers to use when creating mockups.

If you wish to use a different grid system you will need your grid's css to override the layout.css file, as well as we recommend providing proper fallbacks for the class names found in layout.css. Doing so enables you to use more advanced grid systems without worrying about negatively affecting layouts created using the drag and drop templates.

The grid explained

The CMS responsive grid relies on a system of rows and columns, where each column takes up a percentage of the overall viewport width. Each row is given a class of row-fluid. Each column within that row is given a class of span1-span12. A column with span12 filling the whole row, a span of 1 being 6.38% of the width of the row. For example, the code below shows a simplified version of a two column split, where each column gets a class of "span6" and takes up approximately 50% of its container.

    
    <div class="row-fluid ">
            <div class="span6">
                    Column 1 content
            </div>
            <div class="span6">
                    Column  2 content       
            </div>
        </div>

Layout.css has the percentage width of each span class predefined. Generally you will want your span classes to add up to or less than 12. As a higher total means your row is larger than 100% wide. The span classes also have float: left defined by default. Depending on your design, you will still generally want to set a max-width on the container of the sections, to limit how wide they expand.

At a viewport size of 767px, all column modules change to 100% of the width of their container and their float is removed. This causes them to stack and scale down on mobile devices. If you wish to have more granular breakpoints you need to include them in your own CSS.

Example layout

Class map

Header, body, and footer sections

HubSpot template layouts are divided into three sections, based on where the drag and drop dividers are placed. Each of these sections is wrappers in a div with the following respective classes:

header-container-wrapper
body-container-wrapper
footer-container-wrapper

Directly within each of these divs, there is a container div that can be used (but doesn't have to be) as the primary content wrapper for each section. These divs have a class of container-fluid, and the following respective classes:

header-container
body-container
footer-container

Rows (row-fluid-wrapper & row-fluid)

Within these primary containers, each row has a wrapper with the class of row-fluid-wrapper. Within the wrapper, is the row div with the class of row-fluid. Additional rows are created when grouping modules.

Columns (span1-span12)

As previously mentioned, the column divs get dynamically assigned a class of span1-span12, based on their width in the Template Builder UI. This class determines the percentage width that they render. Additional columns are created when grouping modules. When you add custom classes via the Template Builder UI, those classes are applied to these divs.

Cell and module wrappers

Each column contains a div with the class of cell-wrapper. Each module is generally wrapped in a span tag with classes specifc to the type of module as well as hs_cos_wrapper.

Example output

    
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<html class="no-js wf-fftisawebpro-n4-active wf-proximanova-n1-active wf-proximanova-n3-active wf-proximanova-n4-active wf-proximanova-n6-active wf-proximanova-n7-active wf-proximanovacondensed-i4-active wf-proximanovacondensed-i7-active wf-proximanovacondensed-n4-active wf-proximanovacondensed-n7-active wf-active" lang="en"><!--<![endif]--><head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="author" content="HubSpot">
    <meta name="description" content="">
    <meta name="generator" content="HubSpot">
    <title></title>
    

    
    
  <script type="text/javascript" src="//static.hsstatic.net/jquery-libs/static-1.1/jquery/jquery-1.7.1.js"></script>
    <script type="text/javascript">hsjQuery = window['jQuery']</script>
    <link href="//static.hsstatic.net/content_shared_assets/static-1.3949/css/public_common.css" rel="stylesheet">
    <meta property="og:description" content="">
    <meta property="og:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:title" content="">
    <link rel="canonical" href="null">


    <!--[if lt IE 9]>
    <script src="https://static.hsstatic.net/content_shared_assets/static-1.3949/js/css3-mediaqueries.js"></script>
    <![endif]-->
    <meta name="viewport" content="width=device-width


<link rel="SHORTCUT ICON" href="//static.hubspot.com/favicon.ico" type="image/x-icon">


    <!-- The style tag has been deprecated. Attached stylesheets are included in the required_head_tags page variable. -->


</head>
<body class="   hs-content-id-1 hs-landing-page hs-page hs-content-path-c91cf69d-17bb-48ba-ab8f-dd824950a52c hs-content-name-  " style="">
    <div class="header-container-wrapper">
    <div class="header-container container-fluid">

        <div class="row-fluid-wrapper row-depth-1 row-number-1 ">
        <div class="row-fluid ">
            <div class="span12 widget-span widget-type-logo " style="" data-widget-type="logo" data-x="0" data-w="12">
                <div class="cell-wrapper layout-widget-wrapper">
                    <span id="hs_cos_wrapper_logo" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_logo" style="" data-hs-cos-general-type="widget" data-hs-cos-type="logo"><a href="//designers.hubspot.com" id="hs-link-logo" style="border-width:0px;border:0px;"><img src="//cdn2.hubspot.net/hub/327485/file-359490372-png/HubSpot_Logo_2x.png?t=1431644439889&width=250" class="hs-image-widget " style="width:250px;border-width:0px;border:0px;" width="250" alt="HubSpot_Logo_2x.png" title="HubSpot_Logo_2x.png"></a></span>
                </div><!--end layout-widget-wrapper -->
            </div><!--end widget-span -->
        </div><!--end row-->
        </div><!--end row-wrapper -->

    </div><!--end header -->
</div><!--end header wrapper -->

<div class="body-container-wrapper">
    <div class="body-container container-fluid">

        <div class="row-fluid-wrapper row-depth-1 row-number-1 ">
        <div class="row-fluid ">
            <div class="span12 widget-span widget-type-section_header " style="" data-widget-type="section_header" data-x="0" data-w="12">
                <div class="cell-wrapper layout-widget-wrapper">
                    <span id="hs_cos_wrapper_section_header" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_section_header" style="" data-hs-cos-general-type="widget" data-hs-cos-type="section_header"><div class="page-header section-header"><h1>Inbound Marketing</h1><p class="secondary-header"><span id="hs_cos_wrapper_subheader" class="section-subheader">Will take you to new ground</span></p></div></span>
                </div><!--end layout-widget-wrapper -->
            </div><!--end widget-span -->
        </div><!--end row-->
        </div><!--end row-wrapper -->
        <div class="row-fluid-wrapper row-depth-1 row-number-2 ">
        <div class="row-fluid ">
            <div class="span6 widget-span widget-type-rich_text " style="" data-widget-type="rich_text" data-x="0" data-w="6">
                <div class="cell-wrapper layout-widget-wrapper">
                    <span id="hs_cos_wrapper_left_column" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text" style="" data-hs-cos-general-type="widget" data-hs-cos-type="rich_text"><h2>Something Powerful</h2>
<h3>Tell The Reader More</h3>
<p>The headline and subheader tells us what you're <a href="#">offering</a>, and the form header closes the deal. Over here you can explain why your offer is so great it's worth filling out a form for.</p>
<p>Remember:</p>
<ul>
<li>Bullets are great</li>
<li>For spelling out <a href="#">benefits</a> and</li>
<li>Turning visitors into leads.</li>
</ul></span>
                </div><!--end layout-widget-wrapper -->
            </div><!--end widget-span -->
            <div class="span6 widget-span widget-type-form " style="" data-widget-type="form" data-x="6" data-w="6">
                <div class="cell-wrapper layout-widget-wrapper">
                    <span id="hs_cos_wrapper_module_14316630794899224" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form"><h3 id="hs_cos_wrapper_module_14316630794899224_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text"></h3>

<form class="hs-form stacked">
    <div class="field hs-form-field">
        <label>First Name</label>
        <div class="input">
            <input class="hs-input" type="text">
        </div>
    </div>
    <div class="field hs-form-field">
        <label>Last Name</label>
        <div class="input">
            <input class="hs-input" type="text">
        </div>
    </div>
    <div class="field hs-form-field">
        <label>Company</label>
        <div class="input">
            <input class="hs-input" type="text">
        </div>
    </div>
    <div class="field hs-form-field">
        <label>Email</label>
        <div class="input">
            <input class="hs-input" type="text">
        </div>
    </div>
    <a class="hs-button large primary" href="#">Get Free Widget</a>
</form>
</span>
                </div><!--end layout-widget-wrapper -->
            </div><!--end widget-span -->
        </div><!--end row-->
        </div><!--end row-wrapper -->
        <div class="row-fluid-wrapper row-depth-1 row-number-3 ">
        <div class="row-fluid ">
            <div class="span3 widget-span widget-type-linked_image " style="" data-widget-type="linked_image" data-x="0" data-w="3">
                <div class="cell-wrapper layout-widget-wrapper">
                    <span id="hs_cos_wrapper_module_14316630473435465" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image"><img src="//static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png" class="hs-image-widget " style="border-width:0px;border:0px;" alt="" title=""></span>
                </div><!--end layout-widget-wrapper -->
            </div><!--end widget-span -->
            <div class="span3 widget-span widget-type-linked_image " style="" data-widget-type="linked_image" data-x="3" data-w="3">
                <div class="cell-wrapper layout-widget-wrapper">
                    <span id="hs_cos_wrapper_module_14316630550566425" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image"><img src="//static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png" class="hs-image-widget " style="border-width:0px;border:0px;" alt="" title=""></span>
                </div><!--end layout-widget-wrapper -->
            </div><!--end widget-span -->
            <div class="span3 widget-span widget-type-linked_image " style="" data-widget-type="linked_image" data-x="6" data-w="3">
                <div class="cell-wrapper layout-widget-wrapper">
                    <span id="hs_cos_wrapper_module_14316630637577372" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image"><img src="//static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png" class="hs-image-widget " style="border-width:0px;border:0px;" alt="" title=""></span>
                </div><!--end layout-widget-wrapper -->
            </div><!--end widget-span -->
            <div class="span3 widget-span widget-type-linked_image " style="" data-widget-type="linked_image" data-x="9" data-w="3">
                <div class="cell-wrapper layout-widget-wrapper">
                    <span id="hs_cos_wrapper_module_14316630734738319" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_linked_image" style="" data-hs-cos-general-type="widget" data-hs-cos-type="linked_image"><img src="//static.hubspot.com/final/img/content/email-template-images/placeholder_200x200.png" class="hs-image-widget " style="border-width:0px;border:0px;" alt="" title=""></span>
                </div><!--end layout-widget-wrapper -->
            </div><!--end widget-span -->
        </div><!--end row-->
        </div><!--end row-wrapper -->
        <div class="row-fluid-wrapper row-depth-1 row-number-4 ">
        <div class="row-fluid ">
            <div class="span12 widget-span widget-type-social_sharing " style="" data-widget-type="social_sharing" data-x="0" data-w="12">
                <div class="cell-wrapper layout-widget-wrapper">
                    <span id="hs_cos_wrapper_social_sharing" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_social_sharing" style="" data-hs-cos-general-type="widget" data-hs-cos-type="social_sharing"><a href="http://www.facebook.com/share.php?u=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dfacebook" target="_blank" style="width:24px;border-width:0px;border:0px;"><img src="//static.hubspot.com/final/img/common/icons/social/facebook-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Facebook"></a> <a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dlinkedin" target="_blank" style="width:24px;border-width:0px;border:0px;"><img src="//static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on LinkedIn"></a> <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text=" target="_blank" style="width:24px;border-width:0px;border:0px;"><img src="//static.hubspot.com/final/img/common/icons/social/twitter-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Twitter"></a> <a href="https://plus.google.com/share?url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dgoogle_plus" target="_blank" style="width:24px;border-width:0px;border:0px;"><img src="//static.hubspot.com/final/img/common/icons/social/googleplus-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Google+"></a> <a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Dpinterest&media=" target="_blank" style="width:24px;border-width:0px;border:0px;"><img src="//static.hubspot.com/final/img/common/icons/social/pinterest-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Pinterest"></a> <a href="mailto:?subject=Check out http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Demail &body=Check out http%3A%2F%2Fexample.com%2Fmy-page%3Futm_medium%3Dsocial%26utm_source%3Demail" target="_blank" style="width:24px;border-width:0px;border:0px;"><img src="//static.hubspot.com/final/img/common/icons/social/email-24x24.png?width=24" class="hs-image-widget hs-image-social-sharing-24" style="max-height:24px;max-width:24px;border-width:0px;border:0px;" width="24" hspace="0" alt="Share on Email"></a></span>
                </div><!--end layout-widget-wrapper -->
            </div><!--end widget-span -->
        </div><!--end row-->
        </div><!--end row-wrapper -->

    </div><!--end body -->
</div><!--end body wrapper -->

<div class="footer-container-wrapper">
    <div class="footer-container container-fluid">

        <div class="row-fluid-wrapper row-depth-1 row-number-1 ">
        <div class="row-fluid ">
            <div class="span12 widget-span widget-type-page_footer " style="" data-widget-type="page_footer" data-x="0" data-w="12">
                <div class="cell-wrapper layout-widget-wrapper">
                    <span id="hs_cos_wrapper_page_footer" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_page_footer" style="" data-hs-cos-general-type="widget" data-hs-cos-type="page_footer">
<footer>
    <span class="hs-footer-company-copyright">© 2015 HubSpot</span>
</footer>
</span>
                </div><!--end layout-widget-wrapper -->
            </div><!--end widget-span -->
        </div><!--end row-->
        </div><!--end row-wrapper -->

    </div><!--end footer -->
</div><!--end footer wrapper -->


    

<script type="text/javascript" src="//static.hsstatic.net/content_shared_assets/static-1.3949/js/public_common.js"></script>



<script type="text/javascript">
var hsVars = {
    ticks: 1431665701934,
    page_id: 1,
    content_group_id: 0,
    portal_id: 327485,
    app_hs_base_url: "https://app.hubspot.com"
}
</script>





    <!-- Generated by the HubSpot Template Builder - template version 1.03 -->

<!-- end coded_template: id:2859210188 path:custom/page/web_page_basic/Layout_Demo.html -->
</body></html>

Apps & Integrations

CMS

References

Community & Support

App Marketplace New

CMS Asset Marketplace

CMS Reference