how to align div side by side using bootstrap for mobile?

Question

I know using below bootstrap I can easy align div side by side but it's only work for desktop not for mobile.

<div class="container">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Demo: click here to see

Desktop output:

Mobile output

As you can see the columns stack horizontally when it hit 765 x 645 @media_property So, how would it be possible to display the columns in mobile as same it seems in desktop mode side by side?

Since you're using Bootstrap 3, define your columns as col-xs-6. — Rich DeBourke, Apr 08 '21 at 12:58
@isherwood - the question *is* tagged bootstrap-4, but the *demo* on W3Schools is running Bootstrap 3.4.1. — Rich DeBourke, Apr 08 '21 at 13:21

Kristel Cocoli · Answer 1 · 2021-04-08T13:32:54.317

0

define your colums as col-6 col-sm-6 col-md-6 col-lg-6 to have them side by side in every device

edited Apr 08 '21 at 13:32

answered Apr 08 '21 at 13:07

Kristel Cocoli

79
5

didn't get your point can you elaborate? – Ns789 Apr 08 '21 at 13:09
Those `xs` classes don't exist in Bootstrap 4. See https://stackoverflow.com/questions/41794746/col-xs-not-working-in-bootstrap-4. – isherwood Apr 08 '21 at 13:10
Those classes work in Boostrap 4 except of the col-xs-6. Just write class = "col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" to both your columns :) – Kristel Cocoli Apr 08 '21 at 13:15
I appreciate, thanks kristel to answer my question and thankyou all.. specially isherwood:) – Ns789 Apr 08 '21 at 13:18

score 0 · Answer 2 · answered Apr 08 '21 at 13:23

Credit goes to this @tao from this question here.

col-xs-* have been dropped in Bootstrap 4 in favor of col-*.

Replace col-xs-12 with col-12 and it will work as expected.

Also note col-xs-offset-{n} were replaced by offset-{n} in v4.

So after bit of changes... col-sm-6 to col-6

 <div class="container">
          <h1>Hello World!</h1>
          <div class="row">
            <div class="col-6" style="background-color:yellow;">
              <p>Lorem ipsum...</p>
            </div>
            <div class="col-6" style="background-color:pink;">
              <p>Sed ut perspiciatis...</p>
            </div>
          </div>
        </div>

Demo v4: here

how to align div side by side using bootstrap for mobile?

2 Answers2