Styjun

Volcanic 3D masyu

Can a Hogwarts student refuse the Sorting Hat's decision?

Write The Shortest Program to Calculate Height of a Binary Tree

Getting an entry level IT position later in life

split inside flalign

How does Geralt transport his swords?

Would the shaking of an earthquake be visible to somebody in a low-flying aircraft?

Meaning of ギャップ in the following sentence

how to change dot to underline in multiple file-names?

Is being a sunni or having sunni toughts a reason not to be reliable as a hadith narrator (shi'a hadith)?

Why is it to say 'paucis post diebus'?

Is there a command-line tool for converting html files to pdf?

Why are there yellow dot stickers on the front doors of businesses in Russia?

Why do rocket engines use nitrogen actuators to operate the fuel/oxidiser valves instead of electric servos?

What is the difference between washer and O-ring? what is their advantages over the other?

Can an Alchemist permanently have a potion buff?

What is a Written Word™?

Approximating an expression for a potential

How does Rust's 128-bit integer `i128` work on a 64-bit system?

Which one is more important between endgame studies and tactics?

Why do my fried eggs start browning very fast?

Does the problem of P vs NP come under the category of Operational Research?

On the consistency of different well-polished astronomy software

When using the Proficiency Dice optional rule, how should they be used in determining a character's Spell Save DC?

how to remove offset in responsive mode in bootstrap 4

Reordering divs responsively with Twitter Bootstrap?Change navbar color in Twitter BootstrapWhat is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?How to get bootstrap to display more columns in landscape modeHow to get bootstrap columns to stack responsively?Bootstrap 4 img-responsive in one rowHow to vertically justify in Bootstrap 4 columnsResponsive-table does not fill the whole col in which it is nestedHow to center align a button using bootstrap?How to achieve the below layout with help of CSS for a responsive web page?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I have a very simple set up in place, that looks like this:

<div class="row">
 <div id="whoarewe" class="offset-2 col-lg-4 col-md-4 col-xs-12 col-sm-12"></div>
 <div id="whatwedo" class="col-lg-4 col-md-4 cold-sm-12 col-xs12>
 </div>
 </div>

The thing is, in responsive mode, the id #whoarewe still has the 2 column offset, therefore is not lined up vertically with #whatwedo. Is there any way I can do this with simply a media query? or is there a bootstrap property that would take care of it in col-xs and col-sm?

I tried to set col-lg-offset-2 and col-sm-offset-0 but this didn't work :(

Thanks.

responsive-design bootstrap-4

share|improve this question

edited Mar 27 at 2:41

Koosh

asked Mar 27 at 2:34

KooshKoosh

38222 silver badges1111 bronze badges

add a comment | 

0

I have a very simple set up in place, that looks like this:

<div class="row">
 <div id="whoarewe" class="offset-2 col-lg-4 col-md-4 col-xs-12 col-sm-12"></div>
 <div id="whatwedo" class="col-lg-4 col-md-4 cold-sm-12 col-xs12>
 </div>
 </div>

The thing is, in responsive mode, the id #whoarewe still has the 2 column offset, therefore is not lined up vertically with #whatwedo. Is there any way I can do this with simply a media query? or is there a bootstrap property that would take care of it in col-xs and col-sm?

I tried to set col-lg-offset-2 and col-sm-offset-0 but this didn't work :(

Thanks.

responsive-design bootstrap-4

share|improve this question

edited Mar 27 at 2:41

Koosh

asked Mar 27 at 2:34

KooshKoosh

38222 silver badges1111 bronze badges

add a comment | 

I have a very simple set up in place, that looks like this:

<div class="row">
 <div id="whoarewe" class="offset-2 col-lg-4 col-md-4 col-xs-12 col-sm-12"></div>
 <div id="whatwedo" class="col-lg-4 col-md-4 cold-sm-12 col-xs12>
 </div>
 </div>

The thing is, in responsive mode, the id #whoarewe still has the 2 column offset, therefore is not lined up vertically with #whatwedo. Is there any way I can do this with simply a media query? or is there a bootstrap property that would take care of it in col-xs and col-sm?

I tried to set col-lg-offset-2 and col-sm-offset-0 but this didn't work :(

Thanks.

responsive-design bootstrap-4

share|improve this question

edited Mar 27 at 2:41

Koosh

asked Mar 27 at 2:34

KooshKoosh

38222 silver badges1111 bronze badges

<div class="row">
 <div id="whoarewe" class="offset-2 col-lg-4 col-md-4 col-xs-12 col-sm-12"></div>
 <div id="whatwedo" class="col-lg-4 col-md-4 cold-sm-12 col-xs12>
 </div>
 </div>

share|improve this question

edited Mar 27 at 2:41

Koosh

asked Mar 27 at 2:34

KooshKoosh

38222 silver badges1111 bronze badges

share|improve this question

edited Mar 27 at 2:41

Koosh

asked Mar 27 at 2:34

KooshKoosh

38222 silver badges1111 bronze badges

asked Mar 27 at 2:34

KooshKoosh

38222 silver badges1111 bronze badges

asked Mar 27 at 2:34

KooshKoosh

38222 silver badges1111 bronze badges

2 Answers
2

active

oldest

votes

1

I came up with a solution that works in my case, basically using a row property called justify-content-around like so:

<div class="row justify-content-around">
 <div class="col-lg-4"></div>
 <div class="col-log-4></div>
</div>

share|improve this answer

answered Mar 27 at 2:48

KooshKoosh

38222 silver badges1111 bronze badges

add a comment | 

1

<div class="row">
 <div id="whoarewe" class="col-md-4 offset-md-2"></div>
 <div id="whatwedo" class="col-md-4"></div>
</div>

Refer to the documentation for correct offset classes:
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

Otherwise you can set the column width and do some flex magic by justifying content as per your need

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

share|improve this answer

answered Mar 27 at 6:40

HassamHassam

1122 bronze badges

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55368938%2fhow-to-remove-offset-in-responsive-mode-in-bootstrap-4%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

I came up with a solution that works in my case, basically using a row property called justify-content-around like so:

<div class="row justify-content-around">
 <div class="col-lg-4"></div>
 <div class="col-log-4></div>
</div>

share|improve this answer

answered Mar 27 at 2:48

KooshKoosh

38222 silver badges1111 bronze badges

add a comment | 

1

I came up with a solution that works in my case, basically using a row property called justify-content-around like so:

<div class="row justify-content-around">
 <div class="col-lg-4"></div>
 <div class="col-log-4></div>
</div>

share|improve this answer

answered Mar 27 at 2:48

KooshKoosh

38222 silver badges1111 bronze badges

add a comment | 

I came up with a solution that works in my case, basically using a row property called justify-content-around like so:

<div class="row justify-content-around">
 <div class="col-lg-4"></div>
 <div class="col-log-4></div>
</div>

share|improve this answer

answered Mar 27 at 2:48

KooshKoosh

38222 silver badges1111 bronze badges

<div class="row justify-content-around">
 <div class="col-lg-4"></div>
 <div class="col-log-4></div>
</div>

share|improve this answer

answered Mar 27 at 2:48

KooshKoosh

38222 silver badges1111 bronze badges

answered Mar 27 at 2:48

KooshKoosh

38222 silver badges1111 bronze badges

answered Mar 27 at 2:48

KooshKoosh

38222 silver badges1111 bronze badges

1

<div class="row">
 <div id="whoarewe" class="col-md-4 offset-md-2"></div>
 <div id="whatwedo" class="col-md-4"></div>
</div>

Refer to the documentation for correct offset classes:
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

Otherwise you can set the column width and do some flex magic by justifying content as per your need

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

share|improve this answer

answered Mar 27 at 6:40

HassamHassam

1122 bronze badges

add a comment | 

1

<div class="row">
 <div id="whoarewe" class="col-md-4 offset-md-2"></div>
 <div id="whatwedo" class="col-md-4"></div>
</div>

Refer to the documentation for correct offset classes:
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

Otherwise you can set the column width and do some flex magic by justifying content as per your need

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

share|improve this answer

answered Mar 27 at 6:40

HassamHassam

1122 bronze badges

add a comment | 

<div class="row">
 <div id="whoarewe" class="col-md-4 offset-md-2"></div>
 <div id="whatwedo" class="col-md-4"></div>
</div>

Refer to the documentation for correct offset classes:
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

Otherwise you can set the column width and do some flex magic by justifying content as per your need

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

share|improve this answer

answered Mar 27 at 6:40

HassamHassam

1122 bronze badges

<div class="row">
 <div id="whoarewe" class="col-md-4 offset-md-2"></div>
 <div id="whatwedo" class="col-md-4"></div>
</div>

share|improve this answer

answered Mar 27 at 6:40

HassamHassam

1122 bronze badges

answered Mar 27 at 6:40

HassamHassam

1122 bronze badges

answered Mar 27 at 6:40

HassamHassam

1122 bronze badges