Bootstrap element with 2 columns?
<div class="col-sm-6 col-md-4">
The above bootstrap element has 2 columns(col-sm-6 & col-md-4) within its element.
What does that mean?
twitter-bootstrap-3
edited Nov 16 '18 at 3:23
Cœur
19k9114155
asked Nov 2 '16 at 18:40
abefromdublinabefromdublin
143
add a comment |
<div class="col-sm-6 col-md-4">
The above bootstrap element has 2 columns(col-sm-6 & col-md-4) within its element.
What does that mean?
twitter-bootstrap-3
edited Nov 16 '18 at 3:23
Cœur
19k9114155
asked Nov 2 '16 at 18:40
abefromdublinabefromdublin
143
You didn't actually include any code...also, if you want to learn Bootstrap, I suggest starting here: getbootstrap.com/getting-started
– Dave V
Nov 2 '16 at 18:41
For helping you it would be better to post part of the code you have doubt.
– Clever Almeida
Nov 2 '16 at 18:43
add a comment |
<div class="col-sm-6 col-md-4">
The above bootstrap element has 2 columns(col-sm-6 & col-md-4) within its element.
What does that mean?
twitter-bootstrap-3
edited Nov 16 '18 at 3:23
Cœur
19k9114155
asked Nov 2 '16 at 18:40
abefromdublinabefromdublin
143
<div class="col-sm-6 col-md-4">
The above bootstrap element has 2 columns(col-sm-6 & col-md-4) within its element.
What does that mean?
twitter-bootstrap-3
twitter-bootstrap-3
edited Nov 16 '18 at 3:23
Cœur
19k9114155
asked Nov 2 '16 at 18:40
abefromdublinabefromdublin
143
edited Nov 16 '18 at 3:23
Cœur
19k9114155
asked Nov 2 '16 at 18:40
abefromdublinabefromdublin
143
edited Nov 16 '18 at 3:23
Cœur
19k9114155
edited Nov 16 '18 at 3:23
Cœur
19k9114155
edited Nov 16 '18 at 3:23
Cœur
19k9114155
19k9114155
asked Nov 2 '16 at 18:40
abefromdublinabefromdublin
143
asked Nov 2 '16 at 18:40
abefromdublinabefromdublin
143
asked Nov 2 '16 at 18:40
abefromdublinabefromdublin
143
143
You didn't actually include any code...also, if you want to learn Bootstrap, I suggest starting here: getbootstrap.com/getting-started
– Dave V
Nov 2 '16 at 18:41
For helping you it would be better to post part of the code you have doubt.
– Clever Almeida
Nov 2 '16 at 18:43
add a comment |
You didn't actually include any code...also, if you want to learn Bootstrap, I suggest starting here: getbootstrap.com/getting-started
– Dave V
Nov 2 '16 at 18:41
For helping you it would be better to post part of the code you have doubt.
– Clever Almeida
Nov 2 '16 at 18:43
You didn't actually include any code...also, if you want to learn Bootstrap, I suggest starting here: getbootstrap.com/getting-started
– Dave V
Nov 2 '16 at 18:41
You didn't actually include any code...also, if you want to learn Bootstrap, I suggest starting here: getbootstrap.com/getting-started
– Dave V
Nov 2 '16 at 18:41
For helping you it would be better to post part of the code you have doubt.
– Clever Almeida
Nov 2 '16 at 18:43
For helping you it would be better to post part of the code you have doubt.
– Clever Almeida
Nov 2 '16 at 18:43
add a comment |
3 Answers
3
active
oldest
votes
Each bootstrap element can have another row and columns in it. For example if your element is 100px wide and you have 4 and 6 columns then you get 40px and 60px, minus padding of course.
See Two columns with two nested columns on https://getbootstrap.com/examples/grid/
answered Nov 2 '16 at 18:44
ZepplockZepplock
15.3k42847
add a comment |
The .col-md- prefix takes effect on medium devices (≥992px)
The .col-sm- prefix takes effect on small devices (≥768px)
You can read more about this on http://getbootstrap.com/css/#grid-options
Using both classes at the same time will let you achieve different behavior depending on the the device/resolution of the user.
For example, with the same markup and no additional CSS, you may achieve three columns side by side on bigger resolutions and 2 columns side by side and one beneath them on smaller resolutions
You can view and play around with this example on codepen: http://codepen.io/rebagliatte/pen/GNKvOB
answered Nov 2 '16 at 19:03
rebagliatterebagliatte
1,54511322
add a comment |
col-xs-*---> Extra small devices (phones, up to 480px)
col-sm-*---> Small devices (tablets, 768px and up)
col-md-*---> Medium devices (desktops, 992px and up)
col-lg-*---> Large devices (large desktops, 1200px and up)
Each class above kicks in depending on the screen size.
So in your case col-sm-6 & col-md-4 .
Your container takes up 6 columns for small devices and 4 columns for medium devices and up.
Let's say if the screen size goes to extra small devices since we dont have anything specified by default it takes up full width available that being 12 columns.
Hope this helps :)
edited Feb 28 '17 at 8:20
marc_s
582k13011231269
answered Nov 3 '16 at 22:28
Saa_keetinSaa_keetin
567510
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%2f40387442%2fbootstrap-element-with-2-columns%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Each bootstrap element can have another row and columns in it. For example if your element is 100px wide and you have 4 and 6 columns then you get 40px and 60px, minus padding of course.
See Two columns with two nested columns on https://getbootstrap.com/examples/grid/
answered Nov 2 '16 at 18:44
ZepplockZepplock
15.3k42847
add a comment |
Each bootstrap element can have another row and columns in it. For example if your element is 100px wide and you have 4 and 6 columns then you get 40px and 60px, minus padding of course.
See Two columns with two nested columns on https://getbootstrap.com/examples/grid/
answered Nov 2 '16 at 18:44
ZepplockZepplock
15.3k42847
add a comment |
Each bootstrap element can have another row and columns in it. For example if your element is 100px wide and you have 4 and 6 columns then you get 40px and 60px, minus padding of course.
See Two columns with two nested columns on https://getbootstrap.com/examples/grid/
answered Nov 2 '16 at 18:44
ZepplockZepplock
15.3k42847
Each bootstrap element can have another row and columns in it. For example if your element is 100px wide and you have 4 and 6 columns then you get 40px and 60px, minus padding of course.
See Two columns with two nested columns on https://getbootstrap.com/examples/grid/
answered Nov 2 '16 at 18:44
ZepplockZepplock
15.3k42847
answered Nov 2 '16 at 18:44
ZepplockZepplock
15.3k42847
answered Nov 2 '16 at 18:44
ZepplockZepplock
15.3k42847
answered Nov 2 '16 at 18:44
ZepplockZepplock
15.3k42847
15.3k42847
add a comment |
add a comment |
The .col-md- prefix takes effect on medium devices (≥992px)
The .col-sm- prefix takes effect on small devices (≥768px)
You can read more about this on http://getbootstrap.com/css/#grid-options
Using both classes at the same time will let you achieve different behavior depending on the the device/resolution of the user.
For example, with the same markup and no additional CSS, you may achieve three columns side by side on bigger resolutions and 2 columns side by side and one beneath them on smaller resolutions
You can view and play around with this example on codepen: http://codepen.io/rebagliatte/pen/GNKvOB
answered Nov 2 '16 at 19:03
rebagliatterebagliatte
1,54511322
add a comment |
The .col-md- prefix takes effect on medium devices (≥992px)
The .col-sm- prefix takes effect on small devices (≥768px)
You can read more about this on http://getbootstrap.com/css/#grid-options
Using both classes at the same time will let you achieve different behavior depending on the the device/resolution of the user.
For example, with the same markup and no additional CSS, you may achieve three columns side by side on bigger resolutions and 2 columns side by side and one beneath them on smaller resolutions
You can view and play around with this example on codepen: http://codepen.io/rebagliatte/pen/GNKvOB
answered Nov 2 '16 at 19:03
rebagliatterebagliatte
1,54511322
add a comment |
The .col-md- prefix takes effect on medium devices (≥992px)
The .col-sm- prefix takes effect on small devices (≥768px)
You can read more about this on http://getbootstrap.com/css/#grid-options
Using both classes at the same time will let you achieve different behavior depending on the the device/resolution of the user.
For example, with the same markup and no additional CSS, you may achieve three columns side by side on bigger resolutions and 2 columns side by side and one beneath them on smaller resolutions
You can view and play around with this example on codepen: http://codepen.io/rebagliatte/pen/GNKvOB
answered Nov 2 '16 at 19:03
rebagliatterebagliatte
1,54511322
The .col-md- prefix takes effect on medium devices (≥992px)
The .col-sm- prefix takes effect on small devices (≥768px)
You can read more about this on http://getbootstrap.com/css/#grid-options
Using both classes at the same time will let you achieve different behavior depending on the the device/resolution of the user.
For example, with the same markup and no additional CSS, you may achieve three columns side by side on bigger resolutions and 2 columns side by side and one beneath them on smaller resolutions
You can view and play around with this example on codepen: http://codepen.io/rebagliatte/pen/GNKvOB
answered Nov 2 '16 at 19:03
rebagliatterebagliatte
1,54511322
answered Nov 2 '16 at 19:03
rebagliatterebagliatte
1,54511322
answered Nov 2 '16 at 19:03
rebagliatterebagliatte
1,54511322
answered Nov 2 '16 at 19:03
rebagliatterebagliatte
1,54511322
1,54511322
add a comment |
add a comment |
col-xs-*---> Extra small devices (phones, up to 480px)
col-sm-*---> Small devices (tablets, 768px and up)
col-md-*---> Medium devices (desktops, 992px and up)
col-lg-*---> Large devices (large desktops, 1200px and up)
Each class above kicks in depending on the screen size.
So in your case col-sm-6 & col-md-4 .
Your container takes up 6 columns for small devices and 4 columns for medium devices and up.
Let's say if the screen size goes to extra small devices since we dont have anything specified by default it takes up full width available that being 12 columns.
Hope this helps :)
edited Feb 28 '17 at 8:20
marc_s
582k13011231269
answered Nov 3 '16 at 22:28
Saa_keetinSaa_keetin
567510
add a comment |
col-xs-*---> Extra small devices (phones, up to 480px)
col-sm-*---> Small devices (tablets, 768px and up)
col-md-*---> Medium devices (desktops, 992px and up)
col-lg-*---> Large devices (large desktops, 1200px and up)
Each class above kicks in depending on the screen size.
So in your case col-sm-6 & col-md-4 .
Your container takes up 6 columns for small devices and 4 columns for medium devices and up.
Let's say if the screen size goes to extra small devices since we dont have anything specified by default it takes up full width available that being 12 columns.
Hope this helps :)
edited Feb 28 '17 at 8:20
marc_s
582k13011231269
answered Nov 3 '16 at 22:28
Saa_keetinSaa_keetin
567510
add a comment |
col-xs-*---> Extra small devices (phones, up to 480px)
col-sm-*---> Small devices (tablets, 768px and up)
col-md-*---> Medium devices (desktops, 992px and up)
col-lg-*---> Large devices (large desktops, 1200px and up)
Each class above kicks in depending on the screen size.
So in your case col-sm-6 & col-md-4 .
Your container takes up 6 columns for small devices and 4 columns for medium devices and up.
Let's say if the screen size goes to extra small devices since we dont have anything specified by default it takes up full width available that being 12 columns.
Hope this helps :)
edited Feb 28 '17 at 8:20
marc_s
582k13011231269
answered Nov 3 '16 at 22:28
Saa_keetinSaa_keetin
567510
col-xs-*---> Extra small devices (phones, up to 480px)
col-sm-*---> Small devices (tablets, 768px and up)
col-md-*---> Medium devices (desktops, 992px and up)
col-lg-*---> Large devices (large desktops, 1200px and up)
Each class above kicks in depending on the screen size.
So in your case col-sm-6 & col-md-4 .
Your container takes up 6 columns for small devices and 4 columns for medium devices and up.
Let's say if the screen size goes to extra small devices since we dont have anything specified by default it takes up full width available that being 12 columns.
Hope this helps :)
edited Feb 28 '17 at 8:20
marc_s
582k13011231269
answered Nov 3 '16 at 22:28
Saa_keetinSaa_keetin
567510
edited Feb 28 '17 at 8:20
marc_s
582k13011231269
edited Feb 28 '17 at 8:20
marc_s
582k13011231269
edited Feb 28 '17 at 8:20
marc_s
582k13011231269
582k13011231269
answered Nov 3 '16 at 22:28
Saa_keetinSaa_keetin
567510
answered Nov 3 '16 at 22:28
Saa_keetinSaa_keetin
567510
answered Nov 3 '16 at 22:28
Saa_keetinSaa_keetin
567510
567510
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%2f40387442%2fbootstrap-element-with-2-columns%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
You didn't actually include any code...also, if you want to learn Bootstrap, I suggest starting here: getbootstrap.com/getting-started
– Dave V
Nov 2 '16 at 18:41
For helping you it would be better to post part of the code you have doubt.
– Clever Almeida
Nov 2 '16 at 18:43