HTML/CSS/Javascript: How do I make it so .col-sm can replace @media query
I have this code here so that it displays each image side by side (left to right), but I want to make it so that when it is in mobile version (max-width: 480px) that it displays the pictures in 2-columns (so 2 rows). Instead of using @media query, I was wondering how can I do it via .col-sm?
I have PICTURE PICTURE PICTURE and I want to change the format to when it is in mobile display to:
PICTURE PICTURE
PICTURE
<div class="col-9">
<div class="card-group">
<div class="card">
<img class="card-img-top" src="carrots.jpg" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="beets.jpg" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="asparagus.jpg" alt="Card image cap">
</div>
</div>
I apologize if the question is very vague. I'm still new and learning about bootstrap
html css twitter-bootstrap
asked Nov 25 '18 at 2:31
Michael KheongMichael Kheong
958
add a comment |
I have this code here so that it displays each image side by side (left to right), but I want to make it so that when it is in mobile version (max-width: 480px) that it displays the pictures in 2-columns (so 2 rows). Instead of using @media query, I was wondering how can I do it via .col-sm?
I have PICTURE PICTURE PICTURE and I want to change the format to when it is in mobile display to:
PICTURE PICTURE
PICTURE
<div class="col-9">
<div class="card-group">
<div class="card">
<img class="card-img-top" src="carrots.jpg" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="beets.jpg" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="asparagus.jpg" alt="Card image cap">
</div>
</div>
I apologize if the question is very vague. I'm still new and learning about bootstrap
html css twitter-bootstrap
asked Nov 25 '18 at 2:31
Michael KheongMichael Kheong
958
The html you have with the CSS you have together determine how something is displaying. There are a great deal of ways to get something to wrap as the screen becomes too small, and there are many parameters you might want to consider (centering, vertical spacing, ... ) long before you start to code. So I'd first of mall make a minimal thing add get the html and css in there, and then very detailed describe wht you need to happen as the width shrinks.
– user3277192
Nov 25 '18 at 2:36
I want to go from what I have right now, where the pictures are side by side, to when it is shrinked into mobile view, to this: imgur.com/a/SckIH8S
– Michael Kheong
Nov 25 '18 at 2:43
<div class=".col-9"> - I don't think you want the period on the class name
– user2182349
Nov 25 '18 at 5:42
must've been a typo. edited
– Michael Kheong
Nov 25 '18 at 13:43
add a comment |
I have this code here so that it displays each image side by side (left to right), but I want to make it so that when it is in mobile version (max-width: 480px) that it displays the pictures in 2-columns (so 2 rows). Instead of using @media query, I was wondering how can I do it via .col-sm?
I have PICTURE PICTURE PICTURE and I want to change the format to when it is in mobile display to:
PICTURE PICTURE
PICTURE
<div class="col-9">
<div class="card-group">
<div class="card">
<img class="card-img-top" src="carrots.jpg" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="beets.jpg" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="asparagus.jpg" alt="Card image cap">
</div>
</div>
I apologize if the question is very vague. I'm still new and learning about bootstrap
html css twitter-bootstrap
asked Nov 25 '18 at 2:31
Michael KheongMichael Kheong
958
I have this code here so that it displays each image side by side (left to right), but I want to make it so that when it is in mobile version (max-width: 480px) that it displays the pictures in 2-columns (so 2 rows). Instead of using @media query, I was wondering how can I do it via .col-sm?
I have PICTURE PICTURE PICTURE and I want to change the format to when it is in mobile display to:
PICTURE PICTURE
PICTURE
<div class="col-9">
<div class="card-group">
<div class="card">
<img class="card-img-top" src="carrots.jpg" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="beets.jpg" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="asparagus.jpg" alt="Card image cap">
</div>
</div>
I apologize if the question is very vague. I'm still new and learning about bootstrap
html css twitter-bootstrap
html css twitter-bootstrap
asked Nov 25 '18 at 2:31
Michael KheongMichael Kheong
958
asked Nov 25 '18 at 2:31
Michael KheongMichael Kheong
958
edited Nov 25 '18 at 13:43
Michael Kheong
asked Nov 25 '18 at 2:31
Michael KheongMichael Kheong
958
asked Nov 25 '18 at 2:31
Michael KheongMichael Kheong
958
asked Nov 25 '18 at 2:31
Michael KheongMichael Kheong
958
958
The html you have with the CSS you have together determine how something is displaying. There are a great deal of ways to get something to wrap as the screen becomes too small, and there are many parameters you might want to consider (centering, vertical spacing, ... ) long before you start to code. So I'd first of mall make a minimal thing add get the html and css in there, and then very detailed describe wht you need to happen as the width shrinks.
– user3277192
Nov 25 '18 at 2:36
I want to go from what I have right now, where the pictures are side by side, to when it is shrinked into mobile view, to this: imgur.com/a/SckIH8S
– Michael Kheong
Nov 25 '18 at 2:43
<div class=".col-9"> - I don't think you want the period on the class name
– user2182349
Nov 25 '18 at 5:42
must've been a typo. edited
– Michael Kheong
Nov 25 '18 at 13:43
add a comment |
The html you have with the CSS you have together determine how something is displaying. There are a great deal of ways to get something to wrap as the screen becomes too small, and there are many parameters you might want to consider (centering, vertical spacing, ... ) long before you start to code. So I'd first of mall make a minimal thing add get the html and css in there, and then very detailed describe wht you need to happen as the width shrinks.
– user3277192
Nov 25 '18 at 2:36
I want to go from what I have right now, where the pictures are side by side, to when it is shrinked into mobile view, to this: imgur.com/a/SckIH8S
– Michael Kheong
Nov 25 '18 at 2:43
<div class=".col-9"> - I don't think you want the period on the class name
– user2182349
Nov 25 '18 at 5:42
must've been a typo. edited
– Michael Kheong
Nov 25 '18 at 13:43
The html you have with the CSS you have together determine how something is displaying. There are a great deal of ways to get something to wrap as the screen becomes too small, and there are many parameters you might want to consider (centering, vertical spacing, ... ) long before you start to code. So I'd first of mall make a minimal thing add get the html and css in there, and then very detailed describe wht you need to happen as the width shrinks.
– user3277192
Nov 25 '18 at 2:36
The html you have with the CSS you have together determine how something is displaying. There are a great deal of ways to get something to wrap as the screen becomes too small, and there are many parameters you might want to consider (centering, vertical spacing, ... ) long before you start to code. So I'd first of mall make a minimal thing add get the html and css in there, and then very detailed describe wht you need to happen as the width shrinks.
– user3277192
Nov 25 '18 at 2:36
I want to go from what I have right now, where the pictures are side by side, to when it is shrinked into mobile view, to this: imgur.com/a/SckIH8S
– Michael Kheong
Nov 25 '18 at 2:43
I want to go from what I have right now, where the pictures are side by side, to when it is shrinked into mobile view, to this: imgur.com/a/SckIH8S
– Michael Kheong
Nov 25 '18 at 2:43
<div class=".col-9"> - I don't think you want the period on the class name
– user2182349
Nov 25 '18 at 5:42
<div class=".col-9"> - I don't think you want the period on the class name
– user2182349
Nov 25 '18 at 5:42
must've been a typo. edited
– Michael Kheong
Nov 25 '18 at 13:43
must've been a typo. edited
– Michael Kheong
Nov 25 '18 at 13:43
add a comment |
1 Answer
1
active
oldest
votes
You need to give your container element a class of container-fluid then give its children a class of col-xs- accordingly.
For example:
<div class="container-fluid">
<div class="col-md-4 col-xs-6">
<img>
</div>
<div class="col-md-4 col-xs-6">
<img>
</div>
<div class="col-md-4 col-xs-6">
<img>
</div>
</div>
The container-fluid class will make your page responsive. The col-md-4 will split the 12 columns layout into three equal sized parts when the viewport is 992px wide or more. The col-xs-6 will split the layout in two parts.
You can read more about it here
answered Nov 25 '18 at 3:14
Giorgio ZanniGiorgio Zanni
31127
ahh I see. Thanks! I appreciate it
– Michael Kheong
Nov 25 '18 at 13:42
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%2f53464165%2fhtml-css-javascript-how-do-i-make-it-so-col-sm-can-replace-media-query%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
You need to give your container element a class of container-fluid then give its children a class of col-xs- accordingly.
For example:
<div class="container-fluid">
<div class="col-md-4 col-xs-6">
<img>
</div>
<div class="col-md-4 col-xs-6">
<img>
</div>
<div class="col-md-4 col-xs-6">
<img>
</div>
</div>
The container-fluid class will make your page responsive. The col-md-4 will split the 12 columns layout into three equal sized parts when the viewport is 992px wide or more. The col-xs-6 will split the layout in two parts.
You can read more about it here
answered Nov 25 '18 at 3:14
Giorgio ZanniGiorgio Zanni
31127
ahh I see. Thanks! I appreciate it
– Michael Kheong
Nov 25 '18 at 13:42
add a comment |
You need to give your container element a class of container-fluid then give its children a class of col-xs- accordingly.
For example:
<div class="container-fluid">
<div class="col-md-4 col-xs-6">
<img>
</div>
<div class="col-md-4 col-xs-6">
<img>
</div>
<div class="col-md-4 col-xs-6">
<img>
</div>
</div>
The container-fluid class will make your page responsive. The col-md-4 will split the 12 columns layout into three equal sized parts when the viewport is 992px wide or more. The col-xs-6 will split the layout in two parts.
You can read more about it here
answered Nov 25 '18 at 3:14
Giorgio ZanniGiorgio Zanni
31127
ahh I see. Thanks! I appreciate it
– Michael Kheong
Nov 25 '18 at 13:42
add a comment |
You need to give your container element a class of container-fluid then give its children a class of col-xs- accordingly.
For example:
<div class="container-fluid">
<div class="col-md-4 col-xs-6">
<img>
</div>
<div class="col-md-4 col-xs-6">
<img>
</div>
<div class="col-md-4 col-xs-6">
<img>
</div>
</div>
The container-fluid class will make your page responsive. The col-md-4 will split the 12 columns layout into three equal sized parts when the viewport is 992px wide or more. The col-xs-6 will split the layout in two parts.
You can read more about it here
answered Nov 25 '18 at 3:14
Giorgio ZanniGiorgio Zanni
31127
You need to give your container element a class of container-fluid then give its children a class of col-xs- accordingly.
For example:
<div class="container-fluid">
<div class="col-md-4 col-xs-6">
<img>
</div>
<div class="col-md-4 col-xs-6">
<img>
</div>
<div class="col-md-4 col-xs-6">
<img>
</div>
</div>
The container-fluid class will make your page responsive. The col-md-4 will split the 12 columns layout into three equal sized parts when the viewport is 992px wide or more. The col-xs-6 will split the layout in two parts.
You can read more about it here
answered Nov 25 '18 at 3:14
Giorgio ZanniGiorgio Zanni
31127
answered Nov 25 '18 at 3:14
Giorgio ZanniGiorgio Zanni
31127
answered Nov 25 '18 at 3:14
Giorgio ZanniGiorgio Zanni
31127
answered Nov 25 '18 at 3:14
Giorgio ZanniGiorgio Zanni
31127
31127
ahh I see. Thanks! I appreciate it
– Michael Kheong
Nov 25 '18 at 13:42
add a comment |
ahh I see. Thanks! I appreciate it
– Michael Kheong
Nov 25 '18 at 13:42
ahh I see. Thanks! I appreciate it
– Michael Kheong
Nov 25 '18 at 13:42
ahh I see. Thanks! I appreciate it
– Michael Kheong
Nov 25 '18 at 13:42
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%2f53464165%2fhtml-css-javascript-how-do-i-make-it-so-col-sm-can-replace-media-query%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
The html you have with the CSS you have together determine how something is displaying. There are a great deal of ways to get something to wrap as the screen becomes too small, and there are many parameters you might want to consider (centering, vertical spacing, ... ) long before you start to code. So I'd first of mall make a minimal thing add get the html and css in there, and then very detailed describe wht you need to happen as the width shrinks.
– user3277192
Nov 25 '18 at 2:36
I want to go from what I have right now, where the pictures are side by side, to when it is shrinked into mobile view, to this: imgur.com/a/SckIH8S
– Michael Kheong
Nov 25 '18 at 2:43
<div class=".col-9"> - I don't think you want the period on the class name
– user2182349
Nov 25 '18 at 5:42
must've been a typo. edited
– Michael Kheong
Nov 25 '18 at 13:43