How to Create Multiple Rows Using Semantic Markup in Bootstrap 3

How can I create multiple rows using semantic markup in Bootstrap 3?

The problem you describe is documented here: http://getbootstrap.com/css/#grid-responsive-resets

The grid-responsive-resets add additional div's to your html which will break your semantic markup.

I have never tried to append (for example with :after) the grid-responsive-resets properties conditional. With conditional i mean every fourth element for the md-grid. Theoretical i think i should be possible, we should ask @ScottS maybe :)

Something like this (won't work, example)

.col-md-3:nth-child(4n+0):after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Alternative is to give all your panels the same height, which don't work if you don't know the max possible height in the case of dynamic content. If you don't know the max height you could fix this with javascript / jQuery. (see: https://stackoverflow.com/a/19777087/1596547)

Bootstrap 3 grid in less vs in html

Personally i think using Bootstrap's class will give you a maintainable structure. Otherwise you could prefer a more semantic solution. Note your appropriate html structure don't have added value in my opinion and is not semantic.

Using and implementing Bootstrap in a more semantic way won't be always easy:

Example of problem with the grid to have to solve: How can I create multiple rows using semantic markup in Bootstrap 3?. Also Twitter's Bootstrap 3.x semantic mobile grid and especially pay attention to the answer of @Gravy (https://stackoverflow.com/a/18667955/1596547).

Also interesting : How to use sass to properly avoid embedding twitter bootstrap class names on HTML

Bootstrap 3 column layout with minimal additional div/row markup

Check if http://www.bootply.com/64966 is close to what you are after. I put each pair of product divs inside nested rows (more about fluid nesting here).

Good luck!

<div class="container">
    <h1></h1>
    <div class="navbar navbar-inverse">
      <div class="navbar-inner nav-collapse" style="height: auto;">
        <ul class="nav">
        </ul>
      </div>
    </div>
    <div id="content" class="row-fluid">
        <div id="main" class="span9">
            <h2>Main</h2>
          <div class="row-fluid"> <!-- start nested row -->
            <div class="product span6">
                <p>Item 1</p>
            </div>
            <div class="product span6">
                <p>Item 2</p>
            </div>
          </div> <!-- end nested row -->

          <div class="row-fluid"> <!-- start nested row -->
            <div class="product span6">
                <p>Item 3</p>
            </div>
            <div class="product span6">
                <p>Item 4</p>
            </div>
            </div> <!-- end nested row -->
        </div>
        <div id="sidebar" class="span3">
            <h2>Side</h2>
        </div>
</div> <!-- close row-fluid -->

        <div id="other" class="row-fluid">
            <div class="span12">
                <p>other details here</p>
            </div>
        </div>
    </div>

How can you properly layout a bootstrap3 css grid using a mustache template?

Add all you col-md-4's in the same row. 3x col-md-4 makes 100% and the next one jump to next row. This could give you troubles when your col-md-4's differs in height, see also: How can I create multiple rows using semantic markup in Bootstrap 3? and Change overflow mode in small devices on Twitter Bootstrap 3.0

Twitter's Bootstrap 3.x semantic mobile grid

If i understand your question well i think you should use:

<div class="row">
<div class="col-span-6 col-small-span-6″>6</div>
<div class="col-span-6 col-small-span-6″>6</div>
</div>

Where col-span-6 is your class for the large grid and col-small-span-6 for the small grid. If you leave col-small-span-6 your div will stack. The small grid don't use the col-span-* classes.

See also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/

From now Twitter’s Bootstrap defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks.

So your html should be:

<div class="row">
  <div class="col-6 col-lg-6 col-sm-6">6</div>
  <div class="col-6 col-lg-6 col-sm-6">6</div>
</div>

LESS
The latest version: https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip doesn't contain a .make-small-column function any more. See also: https://github.com/twbs/bootstrap/pull/8302 .make-column() will add a media query for min-width: @grid-float-breakpoint so on the small grid your columns will stack always using this function.

You could try:

// Generate the small columns
.make-small-column(@columns) {
  position: relative;
  float: left;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@grid-gutter-width / 2);
  padding-right: (@grid-gutter-width / 2);
  @max : (@grid-float-breakpoint - 1 );
  // Calculate width based on number of columns available
  @media (max-width: @max) {
    width: percentage((@columns / @grid-columns));
  }
}

.wrapper {  .make-row(); }
.left    { .make-column(6); .make-small-column(6);}
.right   { .make-column(6); .make-small-column(6);}

UPDATE

The answer above will be based on the release candidates of Twitter's Bootstrap 3. The final version of Twitter's Bootstrap 3 has 4 grid extra small (xs), small (sm), medium (md) and large (lg). Also the Less code has been change according these grids. So use the .make-{x}-column mixins as described by @gravy in his answer: https://stackoverflow.com/a/18667955/1596547

Tweaking Bootstrap 2.0 for Semantic Markup

ok in less, this is how I figured it out. Its the best I could do, and I couldn't figure out how to deal with .row semantically, but oh well.

Basically I created a custom-mixins.less and created a mixin called .col and the variable is @col. So when you write your selector and do something like .col(3); .col(4); .col(5); or something like that. It should create the proper width. I don't know how this would work for nested columns.

//custom-mixins.less
.col (@col) {
  #gridSystem > .gridColumn(@gridGutterWidth);
  #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @col);
}

//styles.less
.greetings {
  .col(3);
}

lessc will generate the following in styles.css

//styles.css
.greetings {
  float: left;
  margin-left: 20px;
  width: 220px;
}

Using mixins in bootstrap 3 to avoid unsemantic markup for layout structure

You should import the bootstrap.lessfile. So, download the full bootstrap project, and copy out the less folder. It contains everything. And then put the less folder in your project. Also make sure to add the less.js file to your project if you want to get your less compiled while your working. Look at lesscss.org for more information. And also make sure that you have a local server like mamp or xamp, because you can't see the results if you are just serving static html from file:// ....

In your custom less file do something like this:

custom.less

@import "../less/bootstrap.less";

 section {
    .make-row();
}
.left-navigation {
    .make-sm-column(3);
}
.main-content {
    .make-sm-column(9);
}

html

<head>
    <link rel="stylesheet/less" href="css/custom.less">
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
</head>
<section>
<div class="left-navigation">
</div>
<div class="main-content">
</div>
</section>

Where should I place HTML5 semantic tags when using Bootstrap?

Your article should encompass the content, and not the layout.

The difference is in whether the article IS a column, or whether the article HAS a column. Theoretically your CSS could interpret these differently.

I would personally prefer option "a" because it would separate the article as a unit of content, which you could move around in different layouts.

---

Related Topics