Results 1 to 2 of 2

Thread: Responsive 4 Column Layout for .NET Site

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Junior Member
    Join Date
    Jul 2015
    Location
    Fort Lauderdale, FL
    Posts
    1

    Responsive 4 Column Layout for .NET Site

    I am renovating an old .NET Web Forms site to a response bootstrap HTML5 site. It is an e-Commerce site for copier parts and supplies. One of the pages I am working with contains a list of models (4 columns) that are generated dynamically from a search. In the original configuration the data merge was handled with a DataList control with RepeatColumns = 4 and RepeatDirection="Vertical". Here, the data reads top down and left to right. The control would automatically calculate for an even distribution of data on each column.

    Now that we will be moving to a responsive layout, the DataList will no longer do the job. What i need is to achieve the same effect with a [col-lg-3][col-lg-3][col-lg-3][col-lg-3] layout where each column is populated from a database. The columns should also stack as the view port becomes smaller.

    The data will be rendered server-side. Below is the desired layout (for mobile i would like the columns to stack):

    <div class="row">
    <div class="col-lg-3">
    Model 1
    Model 2
    Model 3
    </div>
    <div class="col-lg-3">
    Model 4
    Model 5
    Model 6
    </div>
    <div class="col-lg-3">
    Model 7
    Model 8
    Model 9
    </div>
    <div class="col-lg-3">
    Model 10
    Model 11
    </div>
    </div>

    The main question is when binding the data, how can i set it up so it distributes evenly in the columns and have the columns stack for smaller devices.

    Desktop:
    [A][B][C][D]

    Mobile (Laptop):
    [A][C]
    [B][D]

    Mobile (Smartphone):
    [A]
    [B]
    [C]
    [D]

    Do i need a separate binding for each column? Or can this be done simply with a Repeater control and the right push / pull classes on the <div> elements?

    Thanks in advance,
    Jason

  2. #2
    Hello!

    Since your working with the grid everything should and will stack it's self accordingly to how you code it, laptop and desktop screens are relatively the same size so you wont get that type of layout
    It it will only shrink the layout to suit things like tablets, iphones, ipads and smartphones everything should really be done for you

    Code:
    <div class="row-fluid">
    	<!-- like to have 12 rows already set up-->
    	<div class="col-md-12">
    		<!--I prefer using md rather than xs,lg and sm -->	
    		<div class="col-md-3">
    			<!-- your content for area "A"-->
    		</div>
    		<div class="col-md-3">
    			<!-- your content for area "B"-->
    		</div>
    		<div class="col-md-3">
    			<!-- your content for area "C"-->
    		</div>
    		<div class="col-md-3">
    			<!-- your content for area "D"-->
    		</div>
    	</div>
    </div>
    and with in each of those cols you could put this to fill in the gaps , it automatically will space and what not, they will display 4 per horizontal row
    Code:
    	<div class="row">
      <div class="col-sm-3">
        <div class="thumbnail">
          <img src="..." alt="...">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
          </div>
        </div>
      </div>
    </div>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •