?
Solved

Bootstrap responsive horizontal layout

Posted on 2012-09-10
3
Medium Priority
?
570 Views
Last Modified: 2012-09-13
I have a Bootstrap layout but I need it to be responsive and not sure how to do this horizontally. Here's an image
Bootstrap Horizontal
How can I make that layout using standard Bootstrap layout but also have it be responsive? I currently have it with the "labels" in one fluid row and the inputs in another fluid row but when it is "shrunk", the labels no longer fit with the inputs.

The labels are on one fluid row and the inputs are in another below it. The problem lies when the responsive flow goes into affect, the labels are aligned on top of each other "in one row" and the inputs are aligned on top of each other "in one row", the labels are no longer "associated" with their inputs.
0
Comment
Question by:Eddie Shipman
  • 2
3 Comments
 
LVL 19

Accepted Solution

by:
Bardobrave earned 2000 total points
ID: 38386205
You need to align your elements together.

Instead of aligning labels together into a row and inputs together into another row, what you need to do is to align together each label with their input, and inside it each one on a different row. All blocks should be floated left to reach the solution and must have a width that allow all to fit into the line.

This way, when the width space reduces, the blocks will "jump" to below lines alltogether, maintaining the association between labels and elements.
0
 
LVL 26

Author Comment

by:Eddie Shipman
ID: 38386980
This works exactly as planned in a responsive layout:
<div class="container">
     <div class="row-fluid">
        <div class="span2">
           <div class="row-fluid">
               Label
           </div>
           <div class="row-fluid">
               Field
           </div>
         </div>
        <div class="span2">
           <div class="row-fluid">
               Label
           </div>
           <div class="row-fluid">
               Field
           </div>
         </div>
        <div class="span2">
           <div class="row-fluid">
               Label
           </div>
           <div class="row-fluid">
               Field
           </div>
         </div>
        <div class="span4">
           <div class="row-fluid">
               Label
           </div>
           <div class="row-fluid">
               Field
           </div>
         </div>
        <div class="span2">
           <div class="row-fluid">
               Label
           </div>
           <div class="row-fluid">
               Field
           </div>
         </div>
    </div>
</diV>?

Open in new window

0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 38387165
Yes, I mean something like this more or less.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month14 days, 6 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question