Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap col-md-x nested inside col-md-x

I suppose it’s wrong to nest a col-md-x immediately inside a col-md-x in Bootstrap 3. Am I right?

I have following at the moment:

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>


<div class="row">
  <input class="col-md-4" value="something" />
  <div class="col-md-8">Something here</div>
</div>

In this case, the input border starts at the very beginning of the row. It doesn’t have any padding on the outside of it.
I would like the input to show 15px away from the row border. The way I know of how to achieve this is to put this input inside a col-md-x. However, could this cause any issues?

Tags:

2

Answers


  1. 0

    Ah, just write the markup a little differently, like so:

    <div class="row">
    <div class="col-md-4">
      <input class="form-control" value="something" />
    </div>
    <div class="col-md-8">
      <p class="form-control-static">Something here</p>
    </div>
</div>

    The problem was putting the col-md-4 class on the input.

    Login or Signup to reply.
  2. 0

    From the bootstrap docs:

    To nest your content with the default grid, add a new .row and set of
    .col-sm-* columns within an existing .col-sm-* column.

    So as long as you are nesting within child rows, you are gonna be fine. Another option would be custom css rules and ids for your nested structure to achieve the desired padding or margin.

    UPDATE

    To refer to your comment, since this is about validation states: let me add that bootstrap already offers great validation-highlighting. See this quick sample. The bootstrap docs on forms offer great documentation on this topic. As for the padding: I like to put most of my “not-inline” forms into a .well, which shows the user, where action is required and allows a consistent styling of forms…

    var resetSec = function(){
  $('#sth-form-section').removeClass('has-error');
  $('#sth-form-section').removeClass('has-warning');
  $('#sth-form-section').removeClass('has-success');
  $('#helpBlock-sth').addClass('sr-only');
  $('#helpBlock-sth').html('');
};

$('#invalid').click(function(){
  resetSec();
  $('#sth-form-section').addClass('has-error');
  $('#helpBlock-sth').removeClass('sr-only');
  $('#helpBlock-sth').html('Oh snap! Better think about this one more time!');
});

$('#valid').click(function(){
  resetSec();
  $('#sth-form-section').addClass('has-success');
  $('#helpBlock-sth').removeClass('sr-only');
  $('#helpBlock-sth').html('Well done! I think your input was the best so far!');
});


$('#reset').click(function(){
  resetSec();
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="well">
    <form class="form-horizontal" role="form">
        <div id="sth-form-section" class="form-group">
            <label for="something" class="col-lg-2 control-label">Something:</label>
            <div class="col-lg-10">
                <input type="text" class="form-control" id="something" placeholder="Something here">
                <span id="helpBlock-sth" class="help-block sr-only"></span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-lg-offset-2 col-lg-10">
                <button type="submit" class="btn btn-default">Submit</button>
            </div>
        </div>
    </form>
</div>

<button class="btn btn-primary" id="reset">Reset</button>
<button class="btn btn-danger" id="invalid">Invalid</button>
<button class="btn btn-success" id="valid">Valid</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search