Question

I have a quick question about Bootstrap Grid.

If I have the following code:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-2">
                    Some header here
                </div>
                <div class="col-md-8">
                    <input type="text" class="input-small" />
                    <input type="submit" value="ok" />
                </div>
            </div>
        </div>
    </div>        
</div>

How would you pull the inputfield more to the left, so it has about 5px margin to my "Header" text?

My div with the text obviously has a width, so I can't just pull the input closer to the text. I could change the class to col-md-1, but then my text would be forced on two lines.

I've set up a fiddle here: http://jsfiddle.net/62kLr/ You might have to resize your window, to see the alignment correctly.

/BR Martin

Was it helpful?

Solution

You could use a label instead of separate column...

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-10">
                    <label>Some header here</label>
                    <input type="text" class="input-small">
                    <input type="submit" value="ok">
                </div>
            </div>
        </div>
    </div>        
</div>

http://www.bootply.com/117582

OTHER TIPS

Try to use the col-sm-2 , col-xs-2 features in your grid.

<div class="container">
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="row">
            <div class="col-md-3 col-sm-3 col-xs-3">
                Some header here
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9">
                <input type="text" class="input-small" />
      <input type="submit" value="ok" />
            </div>
        </div>
    </div>
  </div>        
</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top