Mixing
Grid alignment automatically into multiple rows
I would like have it such that I can specify one row but have the program automatically split the result into multiple rows if required. I need to do it this way as I dynamic div content being populated so it needs to properly align accordingly. I am using bootstrap 3.
<div class="row">
<div class="col-md-4">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
</div>
</div>
End result would be: "one", "two", "three" on the first row.
"four", "five", "six" on the second row. "seven" on the third row.
Basically what I am looking for is a way for the bootstrap to automatically align with at most divs per row.
twitter-bootstrap-3
asked Jan 2 at 15:31
Nate PetNate Pet
15.1k102229362
add a comment |
I would like have it such that I can specify one row but have the program automatically split the result into multiple rows if required. I need to do it this way as I dynamic div content being populated so it needs to properly align accordingly. I am using bootstrap 3.
<div class="row">
<div class="col-md-4">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
</div>
</div>
End result would be: "one", "two", "three" on the first row.
"four", "five", "six" on the second row. "seven" on the third row.
Basically what I am looking for is a way for the bootstrap to automatically align with at most divs per row.
twitter-bootstrap-3
asked Jan 2 at 15:31
Nate PetNate Pet
15.1k102229362
add a comment |
I would like have it such that I can specify one row but have the program automatically split the result into multiple rows if required. I need to do it this way as I dynamic div content being populated so it needs to properly align accordingly. I am using bootstrap 3.
<div class="row">
<div class="col-md-4">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
</div>
</div>
End result would be: "one", "two", "three" on the first row.
"four", "five", "six" on the second row. "seven" on the third row.
Basically what I am looking for is a way for the bootstrap to automatically align with at most divs per row.
twitter-bootstrap-3
asked Jan 2 at 15:31
Nate PetNate Pet
15.1k102229362
I would like have it such that I can specify one row but have the program automatically split the result into multiple rows if required. I need to do it this way as I dynamic div content being populated so it needs to properly align accordingly. I am using bootstrap 3.
<div class="row">
<div class="col-md-4">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
</div>
</div>
End result would be: "one", "two", "three" on the first row.
"four", "five", "six" on the second row. "seven" on the third row.
Basically what I am looking for is a way for the bootstrap to automatically align with at most divs per row.
twitter-bootstrap-3
twitter-bootstrap-3
asked Jan 2 at 15:31
Nate PetNate Pet
15.1k102229362
asked Jan 2 at 15:31
Nate PetNate Pet
15.1k102229362
edited Jan 2 at 16:12
Nate Pet
asked Jan 2 at 15:31
Nate PetNate Pet
15.1k102229362
asked Jan 2 at 15:31
Nate PetNate Pet
15.1k102229362
asked Jan 2 at 15:31
Nate PetNate Pet
15.1k102229362
15.1k102229362
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
If i understood everything correctly you're using bootstrap not in the right way.
Every bootstrap row has 12 columns. These columns can be grouped.
Now you can group these columns for each device. Read more on the bootstrap 3 documentation.
For example:
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
one
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
two
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
three
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
four
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
five
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
six
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
seven
</div>
</div>
This code aligns each number text (one, two, three ...) according to the size of your col-XX-Y. So on medium md sizes, you got 3 columns. On small sm sizes you have 2 columns etc.
This is based on the 12 columns (on total) divided by the number you specified in the col-XX-Y class.
Just remember:
The XX represents the screenwidth and the Y represents the columns you
want to group at this screenwidth.
answered Jan 2 at 19:51
jdickeljdickel
745317
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009018%2fgrid-alignment-automatically-into-multiple-rows%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
If i understood everything correctly you're using bootstrap not in the right way.
Every bootstrap row has 12 columns. These columns can be grouped.
Now you can group these columns for each device. Read more on the bootstrap 3 documentation.
For example:
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
one
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
two
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
three
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
four
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
five
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
six
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
seven
</div>
</div>
This code aligns each number text (one, two, three ...) according to the size of your col-XX-Y. So on medium md sizes, you got 3 columns. On small sm sizes you have 2 columns etc.
This is based on the 12 columns (on total) divided by the number you specified in the col-XX-Y class.
Just remember:
The XX represents the screenwidth and the Y represents the columns you
want to group at this screenwidth.
answered Jan 2 at 19:51
jdickeljdickel
745317
add a comment |
If i understood everything correctly you're using bootstrap not in the right way.
Every bootstrap row has 12 columns. These columns can be grouped.
Now you can group these columns for each device. Read more on the bootstrap 3 documentation.
For example:
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
one
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
two
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
three
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
four
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
five
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
six
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
seven
</div>
</div>
This code aligns each number text (one, two, three ...) according to the size of your col-XX-Y. So on medium md sizes, you got 3 columns. On small sm sizes you have 2 columns etc.
This is based on the 12 columns (on total) divided by the number you specified in the col-XX-Y class.
Just remember:
The XX represents the screenwidth and the Y represents the columns you
want to group at this screenwidth.
answered Jan 2 at 19:51
jdickeljdickel
745317
add a comment |
If i understood everything correctly you're using bootstrap not in the right way.
Every bootstrap row has 12 columns. These columns can be grouped.
Now you can group these columns for each device. Read more on the bootstrap 3 documentation.
For example:
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
one
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
two
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
three
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
four
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
five
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
six
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
seven
</div>
</div>
This code aligns each number text (one, two, three ...) according to the size of your col-XX-Y. So on medium md sizes, you got 3 columns. On small sm sizes you have 2 columns etc.
This is based on the 12 columns (on total) divided by the number you specified in the col-XX-Y class.
Just remember:
The XX represents the screenwidth and the Y represents the columns you
want to group at this screenwidth.
answered Jan 2 at 19:51
jdickeljdickel
745317
If i understood everything correctly you're using bootstrap not in the right way.
Every bootstrap row has 12 columns. These columns can be grouped.
Now you can group these columns for each device. Read more on the bootstrap 3 documentation.
For example:
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
one
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
two
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
three
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
four
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
five
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
six
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
seven
</div>
</div>
This code aligns each number text (one, two, three ...) according to the size of your col-XX-Y. So on medium md sizes, you got 3 columns. On small sm sizes you have 2 columns etc.
This is based on the 12 columns (on total) divided by the number you specified in the col-XX-Y class.
Just remember:
The XX represents the screenwidth and the Y represents the columns you
want to group at this screenwidth.
answered Jan 2 at 19:51
jdickeljdickel
745317
answered Jan 2 at 19:51
jdickeljdickel
745317
answered Jan 2 at 19:51
jdickeljdickel
745317
answered Jan 2 at 19:51
jdickeljdickel
745317
745317
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009018%2fgrid-alignment-automatically-into-multiple-rows%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
