Mixing
Bootstrap 4 — How can I add space between overflowed columns
0
Apologies for the awfully worded title. Here is the question I have: I have a row with 4 columns that looks pretty nice on a desktop computer...
...but looks really bad on mobile, because there is no margin between the columns that overflowed.
Here is how I wrote each column:
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-globe-americas"></i></h1>
<h4>Boston, Massachusetts, United States of America</h4>
</div>
Short of writing entirely separate grids for each screen size, is there any way to make the overflowed columns look nice? I'd like some white space between each column.
Here is the full CSS code, in case it helps.
/* this CSS sheet applies to my home page
I am using a color scheme from this fantastic article
https://www.canva.com/learn/100-color-combinations/
#375e97 rgba(55, 94, 151, 0.2) sky -- a deep blue
#fb6542 rgba(251,101,66,1) sunset -- a salmon color
#ffbb00 rgba(255,187,0,1) sunflower -- yellow
#3f681c rgba(63,104,28,1) grass -- dark green
*/
body{
font-size: 1rem;
color:#3f681c;
font-family: Kalam, sans-serif;
background-color: #e2E8e4;
line-height: 1.5;
}
a:hover{
text-decoration:none;
}
hr{
height:0.08rem;
margin-bottom: 2rem;
background-color: #3f681c;
border-radius: 0.5rem;
}
.row__marginb{
margin-bottom: 1rem;
}
.jumbotron{
line-height: 2;
}
#mainJumbotron{
height: 55vh;
background-position: 50% 50%;
background-size:cover;
background-image:radial-gradient(rgba(55, 94, 151, 0.2), rgba(51, 107, 135, 0.0)), url("/static/home/img/august.jpg");
border-radius: 0 0 1rem 1rem;
clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 92% 100%, 8% 100%, 0% 92%);
}
.nameTitle{
font-family: Pacifico, serif;
color:#fdf6f6;
font-size: 5rem;
}
.mainSubtitle{
font-family: Patua One, serif;
color:#fdf6f6;
font-size:1.5rem;
}
.profilepic{
border-radius: 3rem;
}
.btn-socialmedia:link,.btn-socialmedia:visited{
box-sizing:border-box;
height:5rem;
width:5rem;
padding:0.4rem 0.6rem 0.3rem 0.6rem;
border-radius:0.5rem;
background-color: #3f681c;
color:#fdf6f6;
position:relative;
bottom:0rem;
transition: bottom 0.15s ease-in-out;
}
.btn-socialmedia:hover{
color:#fdf6f6ec;
bottom:0.2rem;
}
.btn-socialmedia:active{
bottom:0.1rem;
}
.footer{
color:#fdf6f6;
background-image: radial-gradient(rgba(55, 94, 151, 1), rgb(10, 96, 139));
padding-top:1rem;
clip-path: polygon(8% 0%, 92% 0%, 100% 92%, 100% 100%, 0% 100%, 0% 92%);
}
.flagImage{
height: 1.5rem;
width: 2.2rem;
border-radius: 0.2rem;
}
Here is the relevant HTML
<div class="row text-center row__marginb">
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-scroll"></i></h1>
<div class="row">
<div class="col-6">
<h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_Resume.pdf' %}"
download>Resume</a> </h5>
</div>
<div class="col">
<img class="flagImage" src="{% static 'home/img/america.png' %}">
</div>
</div>
<div class="row">
<div class="col-6">
<h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_CV.pdf' %}" download>CV</a>
</h5>
</div>
<div class="col">
<img class="flagImage" src="{% static 'home/img/america.png' %}">
</div>
</div>
<div class="row">
<div class="col-6">
<h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_CV_italiano.doc' %}"
download> CV</a> </h5>
</div>
<div class="col">
<img class="flagImage" src="{% static 'home/img/italy.png' %}">
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-laptop"></i> </h1>
<a class="btn-socialmedia" href="https://www.facebook.com/jsbordone" target="_blank"><i class="fab fa-facebook"></i></a>
<a class="btn-socialmedia" href="https://www.linkedin.com/in/jimmy-sbordone-aaa806128/" target="_blank"><i
class="fab fa-linkedin-in"></i></a>
<a class="btn-socialmedia" href="https://github.com/JimmySbordoneJr" target="_blank"><i class="fab fa-github"></i></a>
</div>
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-envelope"></i> </h1>
<h3>jsbordon@bu.edu</h3>
</div>
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-globe-americas"></i></h1>
<h4>Boston, Massachusetts, United States of America</h4>
</div>
</div>
</div>
html css twitter-bootstrap bootstrap-4
asked Jan 3 at 1:55
Jimmy Sbordone Jr.Jimmy Sbordone Jr.
136
add a comment |
0
Apologies for the awfully worded title. Here is the question I have: I have a row with 4 columns that looks pretty nice on a desktop computer...
...but looks really bad on mobile, because there is no margin between the columns that overflowed.
Here is how I wrote each column:
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-globe-americas"></i></h1>
<h4>Boston, Massachusetts, United States of America</h4>
</div>
Short of writing entirely separate grids for each screen size, is there any way to make the overflowed columns look nice? I'd like some white space between each column.
Here is the full CSS code, in case it helps.
/* this CSS sheet applies to my home page
I am using a color scheme from this fantastic article
https://www.canva.com/learn/100-color-combinations/
#375e97 rgba(55, 94, 151, 0.2) sky -- a deep blue
#fb6542 rgba(251,101,66,1) sunset -- a salmon color
#ffbb00 rgba(255,187,0,1) sunflower -- yellow
#3f681c rgba(63,104,28,1) grass -- dark green
*/
body{
font-size: 1rem;
color:#3f681c;
font-family: Kalam, sans-serif;
background-color: #e2E8e4;
line-height: 1.5;
}
a:hover{
text-decoration:none;
}
hr{
height:0.08rem;
margin-bottom: 2rem;
background-color: #3f681c;
border-radius: 0.5rem;
}
.row__marginb{
margin-bottom: 1rem;
}
.jumbotron{
line-height: 2;
}
#mainJumbotron{
height: 55vh;
background-position: 50% 50%;
background-size:cover;
background-image:radial-gradient(rgba(55, 94, 151, 0.2), rgba(51, 107, 135, 0.0)), url("/static/home/img/august.jpg");
border-radius: 0 0 1rem 1rem;
clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 92% 100%, 8% 100%, 0% 92%);
}
.nameTitle{
font-family: Pacifico, serif;
color:#fdf6f6;
font-size: 5rem;
}
.mainSubtitle{
font-family: Patua One, serif;
color:#fdf6f6;
font-size:1.5rem;
}
.profilepic{
border-radius: 3rem;
}
.btn-socialmedia:link,.btn-socialmedia:visited{
box-sizing:border-box;
height:5rem;
width:5rem;
padding:0.4rem 0.6rem 0.3rem 0.6rem;
border-radius:0.5rem;
background-color: #3f681c;
color:#fdf6f6;
position:relative;
bottom:0rem;
transition: bottom 0.15s ease-in-out;
}
.btn-socialmedia:hover{
color:#fdf6f6ec;
bottom:0.2rem;
}
.btn-socialmedia:active{
bottom:0.1rem;
}
.footer{
color:#fdf6f6;
background-image: radial-gradient(rgba(55, 94, 151, 1), rgb(10, 96, 139));
padding-top:1rem;
clip-path: polygon(8% 0%, 92% 0%, 100% 92%, 100% 100%, 0% 100%, 0% 92%);
}
.flagImage{
height: 1.5rem;
width: 2.2rem;
border-radius: 0.2rem;
}
Here is the relevant HTML
<div class="row text-center row__marginb">
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-scroll"></i></h1>
<div class="row">
<div class="col-6">
<h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_Resume.pdf' %}"
download>Resume</a> </h5>
</div>
<div class="col">
<img class="flagImage" src="{% static 'home/img/america.png' %}">
</div>
</div>
<div class="row">
<div class="col-6">
<h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_CV.pdf' %}" download>CV</a>
</h5>
</div>
<div class="col">
<img class="flagImage" src="{% static 'home/img/america.png' %}">
</div>
</div>
<div class="row">
<div class="col-6">
<h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_CV_italiano.doc' %}"
download> CV</a> </h5>
</div>
<div class="col">
<img class="flagImage" src="{% static 'home/img/italy.png' %}">
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-laptop"></i> </h1>
<a class="btn-socialmedia" href="https://www.facebook.com/jsbordone" target="_blank"><i class="fab fa-facebook"></i></a>
<a class="btn-socialmedia" href="https://www.linkedin.com/in/jimmy-sbordone-aaa806128/" target="_blank"><i
class="fab fa-linkedin-in"></i></a>
<a class="btn-socialmedia" href="https://github.com/JimmySbordoneJr" target="_blank"><i class="fab fa-github"></i></a>
</div>
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-envelope"></i> </h1>
<h3>jsbordon@bu.edu</h3>
</div>
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-globe-americas"></i></h1>
<h4>Boston, Massachusetts, United States of America</h4>
</div>
</div>
</div>
html css twitter-bootstrap bootstrap-4
asked Jan 3 at 1:55
Jimmy Sbordone Jr.Jimmy Sbordone Jr.
136
add a comment |
0
0
0
Apologies for the awfully worded title. Here is the question I have: I have a row with 4 columns that looks pretty nice on a desktop computer...
...but looks really bad on mobile, because there is no margin between the columns that overflowed.
Here is how I wrote each column:
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-globe-americas"></i></h1>
<h4>Boston, Massachusetts, United States of America</h4>
</div>
Short of writing entirely separate grids for each screen size, is there any way to make the overflowed columns look nice? I'd like some white space between each column.
Here is the full CSS code, in case it helps.
/* this CSS sheet applies to my home page
I am using a color scheme from this fantastic article
https://www.canva.com/learn/100-color-combinations/
#375e97 rgba(55, 94, 151, 0.2) sky -- a deep blue
#fb6542 rgba(251,101,66,1) sunset -- a salmon color
#ffbb00 rgba(255,187,0,1) sunflower -- yellow
#3f681c rgba(63,104,28,1) grass -- dark green
*/
body{
font-size: 1rem;
color:#3f681c;
font-family: Kalam, sans-serif;
background-color: #e2E8e4;
line-height: 1.5;
}
a:hover{
text-decoration:none;
}
hr{
height:0.08rem;
margin-bottom: 2rem;
background-color: #3f681c;
border-radius: 0.5rem;
}
.row__marginb{
margin-bottom: 1rem;
}
.jumbotron{
line-height: 2;
}
#mainJumbotron{
height: 55vh;
background-position: 50% 50%;
background-size:cover;
background-image:radial-gradient(rgba(55, 94, 151, 0.2), rgba(51, 107, 135, 0.0)), url("/static/home/img/august.jpg");
border-radius: 0 0 1rem 1rem;
clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 92% 100%, 8% 100%, 0% 92%);
}
.nameTitle{
font-family: Pacifico, serif;
color:#fdf6f6;
font-size: 5rem;
}
.mainSubtitle{
font-family: Patua One, serif;
color:#fdf6f6;
font-size:1.5rem;
}
.profilepic{
border-radius: 3rem;
}
.btn-socialmedia:link,.btn-socialmedia:visited{
box-sizing:border-box;
height:5rem;
width:5rem;
padding:0.4rem 0.6rem 0.3rem 0.6rem;
border-radius:0.5rem;
background-color: #3f681c;
color:#fdf6f6;
position:relative;
bottom:0rem;
transition: bottom 0.15s ease-in-out;
}
.btn-socialmedia:hover{
color:#fdf6f6ec;
bottom:0.2rem;
}
.btn-socialmedia:active{
bottom:0.1rem;
}
.footer{
color:#fdf6f6;
background-image: radial-gradient(rgba(55, 94, 151, 1), rgb(10, 96, 139));
padding-top:1rem;
clip-path: polygon(8% 0%, 92% 0%, 100% 92%, 100% 100%, 0% 100%, 0% 92%);
}
.flagImage{
height: 1.5rem;
width: 2.2rem;
border-radius: 0.2rem;
}
Here is the relevant HTML
<div class="row text-center row__marginb">
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-scroll"></i></h1>
<div class="row">
<div class="col-6">
<h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_Resume.pdf' %}"
download>Resume</a> </h5>
</div>
<div class="col">
<img class="flagImage" src="{% static 'home/img/america.png' %}">
</div>
</div>
<div class="row">
<div class="col-6">
<h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_CV.pdf' %}" download>CV</a>
</h5>
</div>
<div class="col">
<img class="flagImage" src="{% static 'home/img/america.png' %}">
</div>
</div>
<div class="row">
<div class="col-6">
<h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_CV_italiano.doc' %}"
download> CV</a> </h5>
</div>
<div class="col">
<img class="flagImage" src="{% static 'home/img/italy.png' %}">
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-laptop"></i> </h1>
<a class="btn-socialmedia" href="https://www.facebook.com/jsbordone" target="_blank"><i class="fab fa-facebook"></i></a>
<a class="btn-socialmedia" href="https://www.linkedin.com/in/jimmy-sbordone-aaa806128/" target="_blank"><i
class="fab fa-linkedin-in"></i></a>
<a class="btn-socialmedia" href="https://github.com/JimmySbordoneJr" target="_blank"><i class="fab fa-github"></i></a>
</div>
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-envelope"></i> </h1>
<h3>jsbordon@bu.edu</h3>
</div>
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-globe-americas"></i></h1>
<h4>Boston, Massachusetts, United States of America</h4>
</div>
</div>
</div>
html css twitter-bootstrap bootstrap-4
asked Jan 3 at 1:55
Jimmy Sbordone Jr.Jimmy Sbordone Jr.
136
Apologies for the awfully worded title. Here is the question I have: I have a row with 4 columns that looks pretty nice on a desktop computer...
...but looks really bad on mobile, because there is no margin between the columns that overflowed.
Here is how I wrote each column:
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-globe-americas"></i></h1>
<h4>Boston, Massachusetts, United States of America</h4>
</div>
Short of writing entirely separate grids for each screen size, is there any way to make the overflowed columns look nice? I'd like some white space between each column.
Here is the full CSS code, in case it helps.
/* this CSS sheet applies to my home page
I am using a color scheme from this fantastic article
https://www.canva.com/learn/100-color-combinations/
#375e97 rgba(55, 94, 151, 0.2) sky -- a deep blue
#fb6542 rgba(251,101,66,1) sunset -- a salmon color
#ffbb00 rgba(255,187,0,1) sunflower -- yellow
#3f681c rgba(63,104,28,1) grass -- dark green
*/
body{
font-size: 1rem;
color:#3f681c;
font-family: Kalam, sans-serif;
background-color: #e2E8e4;
line-height: 1.5;
}
a:hover{
text-decoration:none;
}
hr{
height:0.08rem;
margin-bottom: 2rem;
background-color: #3f681c;
border-radius: 0.5rem;
}
.row__marginb{
margin-bottom: 1rem;
}
.jumbotron{
line-height: 2;
}
#mainJumbotron{
height: 55vh;
background-position: 50% 50%;
background-size:cover;
background-image:radial-gradient(rgba(55, 94, 151, 0.2), rgba(51, 107, 135, 0.0)), url("/static/home/img/august.jpg");
border-radius: 0 0 1rem 1rem;
clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 92% 100%, 8% 100%, 0% 92%);
}
.nameTitle{
font-family: Pacifico, serif;
color:#fdf6f6;
font-size: 5rem;
}
.mainSubtitle{
font-family: Patua One, serif;
color:#fdf6f6;
font-size:1.5rem;
}
.profilepic{
border-radius: 3rem;
}
.btn-socialmedia:link,.btn-socialmedia:visited{
box-sizing:border-box;
height:5rem;
width:5rem;
padding:0.4rem 0.6rem 0.3rem 0.6rem;
border-radius:0.5rem;
background-color: #3f681c;
color:#fdf6f6;
position:relative;
bottom:0rem;
transition: bottom 0.15s ease-in-out;
}
.btn-socialmedia:hover{
color:#fdf6f6ec;
bottom:0.2rem;
}
.btn-socialmedia:active{
bottom:0.1rem;
}
.footer{
color:#fdf6f6;
background-image: radial-gradient(rgba(55, 94, 151, 1), rgb(10, 96, 139));
padding-top:1rem;
clip-path: polygon(8% 0%, 92% 0%, 100% 92%, 100% 100%, 0% 100%, 0% 92%);
}
.flagImage{
height: 1.5rem;
width: 2.2rem;
border-radius: 0.2rem;
}
Here is the relevant HTML
<div class="row text-center row__marginb">
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-scroll"></i></h1>
<div class="row">
<div class="col-6">
<h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_Resume.pdf' %}"
download>Resume</a> </h5>
</div>
<div class="col">
<img class="flagImage" src="{% static 'home/img/america.png' %}">
</div>
</div>
<div class="row">
<div class="col-6">
<h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_CV.pdf' %}" download>CV</a>
</h5>
</div>
<div class="col">
<img class="flagImage" src="{% static 'home/img/america.png' %}">
</div>
</div>
<div class="row">
<div class="col-6">
<h5><a class="text-success" href="{% static 'home/handouts/JimmySbordone_CV_italiano.doc' %}"
download> CV</a> </h5>
</div>
<div class="col">
<img class="flagImage" src="{% static 'home/img/italy.png' %}">
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-laptop"></i> </h1>
<a class="btn-socialmedia" href="https://www.facebook.com/jsbordone" target="_blank"><i class="fab fa-facebook"></i></a>
<a class="btn-socialmedia" href="https://www.linkedin.com/in/jimmy-sbordone-aaa806128/" target="_blank"><i
class="fab fa-linkedin-in"></i></a>
<a class="btn-socialmedia" href="https://github.com/JimmySbordoneJr" target="_blank"><i class="fab fa-github"></i></a>
</div>
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-envelope"></i> </h1>
<h3>jsbordon@bu.edu</h3>
</div>
<div class="col-md-3 col-sm-6">
<h1><i class="fas fa-globe-americas"></i></h1>
<h4>Boston, Massachusetts, United States of America</h4>
</div>
</div>
</div>
html css twitter-bootstrap bootstrap-4
html css twitter-bootstrap bootstrap-4
asked Jan 3 at 1:55
Jimmy Sbordone Jr.Jimmy Sbordone Jr.
136
asked Jan 3 at 1:55
Jimmy Sbordone Jr.Jimmy Sbordone Jr.
136
edited Jan 3 at 13:38
Jimmy Sbordone Jr.
asked Jan 3 at 1:55
Jimmy Sbordone Jr.Jimmy Sbordone Jr.
136
asked Jan 3 at 1:55
Jimmy Sbordone Jr.Jimmy Sbordone Jr.
136
asked Jan 3 at 1:55
Jimmy Sbordone Jr.Jimmy Sbordone Jr.
136
136
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
Use the margin classes, for example
mt-xs-2 for .5rem top margin for the xs media query
or just mt-1 or mt-2 for any media query.
<div class="col-md-3 col-sm-6 mt-xs-2">
<h1><i class="fas fa-globe-americas"></i></h1>
<h4>Boston, Massachusetts, United States of America</h4>
</div>
more info in https://getbootstrap.com/docs/4.2/utilities/spacing/
answered Jan 3 at 2:21
Alex AngelicoAlex Angelico
1,68242139
add a comment |
0
You can try using where the max-width is the size of the screen
@media only screen and (max-width:435px){
.col-sm-6{
padding:1px;
margin:1px;
}
}
answered Jan 3 at 2:24
MhtyrMhtyr
34
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
});
}
});
draft saved
draft discarded
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%2f54015429%2fbootstrap-4-how-can-i-add-space-between-overflowed-columns%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Use the margin classes, for example
mt-xs-2 for .5rem top margin for the xs media query
or just mt-1 or mt-2 for any media query.
<div class="col-md-3 col-sm-6 mt-xs-2">
<h1><i class="fas fa-globe-americas"></i></h1>
<h4>Boston, Massachusetts, United States of America</h4>
</div>
more info in https://getbootstrap.com/docs/4.2/utilities/spacing/
answered Jan 3 at 2:21
Alex AngelicoAlex Angelico
1,68242139
add a comment |
0
Use the margin classes, for example
mt-xs-2 for .5rem top margin for the xs media query
or just mt-1 or mt-2 for any media query.
<div class="col-md-3 col-sm-6 mt-xs-2">
<h1><i class="fas fa-globe-americas"></i></h1>
<h4>Boston, Massachusetts, United States of America</h4>
</div>
more info in https://getbootstrap.com/docs/4.2/utilities/spacing/
answered Jan 3 at 2:21
Alex AngelicoAlex Angelico
1,68242139
add a comment |
0
0
0
Use the margin classes, for example
mt-xs-2 for .5rem top margin for the xs media query
or just mt-1 or mt-2 for any media query.
<div class="col-md-3 col-sm-6 mt-xs-2">
<h1><i class="fas fa-globe-americas"></i></h1>
<h4>Boston, Massachusetts, United States of America</h4>
</div>
more info in https://getbootstrap.com/docs/4.2/utilities/spacing/
answered Jan 3 at 2:21
Alex AngelicoAlex Angelico
1,68242139
Use the margin classes, for example
mt-xs-2 for .5rem top margin for the xs media query
or just mt-1 or mt-2 for any media query.
<div class="col-md-3 col-sm-6 mt-xs-2">
<h1><i class="fas fa-globe-americas"></i></h1>
<h4>Boston, Massachusetts, United States of America</h4>
</div>
more info in https://getbootstrap.com/docs/4.2/utilities/spacing/
answered Jan 3 at 2:21
Alex AngelicoAlex Angelico
1,68242139
answered Jan 3 at 2:21
Alex AngelicoAlex Angelico
1,68242139
answered Jan 3 at 2:21
Alex AngelicoAlex Angelico
1,68242139
answered Jan 3 at 2:21
Alex AngelicoAlex Angelico
1,68242139
1,68242139
add a comment |
add a comment |
0
You can try using where the max-width is the size of the screen
@media only screen and (max-width:435px){
.col-sm-6{
padding:1px;
margin:1px;
}
}
answered Jan 3 at 2:24
MhtyrMhtyr
34
add a comment |
0
You can try using where the max-width is the size of the screen
@media only screen and (max-width:435px){
.col-sm-6{
padding:1px;
margin:1px;
}
}
answered Jan 3 at 2:24
MhtyrMhtyr
34
add a comment |
0
0
0
You can try using where the max-width is the size of the screen
@media only screen and (max-width:435px){
.col-sm-6{
padding:1px;
margin:1px;
}
}
answered Jan 3 at 2:24
MhtyrMhtyr
34
You can try using where the max-width is the size of the screen
@media only screen and (max-width:435px){
.col-sm-6{
padding:1px;
margin:1px;
}
}
answered Jan 3 at 2:24
MhtyrMhtyr
34
answered Jan 3 at 2:24
MhtyrMhtyr
34
answered Jan 3 at 2:24
MhtyrMhtyr
34
answered Jan 3 at 2:24
MhtyrMhtyr
34
34
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f54015429%2fbootstrap-4-how-can-i-add-space-between-overflowed-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
