CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
willthiswork89
willthiswork89

Reputation: 617

Bootstrap formatting is not making sense

I'm VERY new to boot strap. So I figured I would setup a small "form" to see if I could get it to flow and I did an absolute horrible job. I am trying to get things to group into 2's and no more than 5 text boxes per row even in the largest of settings. When I try to set it properly I get TONS of space between the left and right columns.

I tried setting the header but this wrapped strangely and when I tried doing text boxes I got TONS of space between the two columns 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <h3>Quick Survey for Professional Research!</h3>
</div>

. I ended up getting something kind of close using 

<div class="row">
    <div class="input-group text-center">
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <input type="text" />
        <input type="text" />
    </div>
</div>

But that doesn't seem like its the proper way to handle groups of text boxes and it certainly doesn't get me my grouping that I was looking for. I have set a mockup in jsfiddle from my ASP.net code and it can be found at https://jsfiddle.net/5ckoapng/9/

Any help would be greatly appreciated in understanding what i'm missing here. I'm sure its really stupid but I've spent about 2 hours researching different forms or formatting and couldn't figure this out.

Upvotes: 0

Views: 69

Answers (1)

hamish.au
hamish.au

Reputation: 68

Bootstrap is mobile first - if an element is going to span 12 columns on all resolutions then all you need is the single class:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h3>Quick Survey for Professional Research!</h3>
        </div>
    </div>
</div>

To show form elements in groups of 2, then you need to nest columns: http://getbootstrap.com/css/#grid-nesting

For example:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <form>
                <div class="row">
                    <div class="col-xs-6">
                        #form input
                    </div>
                    <div class="col-xs-6">
                        #form input
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

That way there will be 2x 50% (col-xs-6) width columns nested within the main 100% (col-xs-12) column. I have not added form styling or classes, as these are all readily available in the documentation: http://getbootstrap.com/css/#forms

If you wish to use 5 nested columns, then you can utilise the offset class to push 5x col-xs-2 columns over by 1 so they appear to be centred within the main col-xs-12 column: http://getbootstrap.com/css/#grid-offsetting

Upvotes: 1

Related Questions