Hi,

I am trying to create a skin with a right sidebar. main content is col-md-8 with a sidebar of col-md-3 col-md-offset-1.

Under main content I need 3 additional columns. I guess nesting is a no-no in DNN. Doesn't work right. At least not for me.

If this were a regular bootstrap site I could do this minus the runat server. Any help would be appreciated.

  <!-- Main Content -->

   

         <!-- row 2 -->

    <div class="row">

     <div id="mainContent" class="col-md-8" runat="server">

            <div class="row">

                <div id="threeColumn1" class="col-md-2" runat="server"></div>

                <div id="threeColumn2" class="col-md-3" runat="server"></div>

                <div id="threeColumn3" class="col-md-3" runat="server"></div>

        </div>

     </div><!-- end #mainContent-->

        <!--Side Bar-->

        <div id="sideBar" class="col-md-3 col-md-offset-1" runat="server"></div>

       

        </div><!-- end row 2 -->

Thanks but unfortunately that will not work for me. I really need to nest the entire row in the first row. I had the code wrong in my example. My 3 columns need to span 3 cols each (I had one marked for 2 which was space appropriate but not with 3) and that won't work if I use the offset in the sidebar, which I really need to use.  I know on a regular bootstrap site you can nest a row of columns inside a row of columns and presto, it works. But with DNN, my 3 cols will pop above my col-md-8.  Still looking for a solution;)

<div class="row">

     <div id="mainContent" class="col-md-8" runat="server">

  <div class="row">

  <div id="threeColumn1" class="col-md-3" runat="server"></div>

  <div id="threeColumn2" class="col-md-3" runat="server"></div>

  <div id="threeColumn3" class="col-md-3" runat="server"></div>

  </div> 

     </div><!-- end #mainContent-->

        <!--Side Bar-->

        <div id="sideBar" class="col-md-3 col-md-offset-1" runat="server"></div>

</div><!-- end row 2 -->

This is the solution I finally came up with. Works great.

<div class="row">

        <div class="col-sm-8 main">

          <div id="mainContent" runat="server"></div><!-- /#mainContent -->

            <div id="threeColumn1" class="col-sm-4" runat="server"></div><!-- /#threeColumn1 -->

            <div id="threeColumn2" class="col-sm-4" runat="server"></div><!-- /#threeColumn2 -->

         

            <div id="threeColumn3" class="col-sm-4" runat="server"></div><!-- /#threeColumn3 -->

        </div><!-- /.main -->

        <div id="sideBar" class="col-sm-3 col-sm-offset-1" runat="server"></div><!-- /#sideBar -->

</div><!-- /.row -->