CODEWITHSUNDEEP
bootstrap-4
NDOE
NDOE

Reputation: 145

Bootstrap columns not working on mobile

I have three coluns in on row and it works ok. I used col-xs-12 so the columns become rows when it goes to mobile. Its not working. Columns remain in one row

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />


<div class="content-footer">
      <div class="container">          
             <div class="row">
                 <div class="col-xs-12 col-sm-4">
                      <div class="footer-icon">
                              <i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>
                              </div>
                               <div class="footer-text-block" style="margin-left:100px;">          
                               <p> 119180, Moscow <br>Malaya Yakimanka,3</p>
                                                              </div>
                 </div>
                 <div class="col-xs-12 col-sm-4">
                      <div class="footer-icon">
                              <i class="fa fa-envelope fa-lg" aria-hidden="true"></i>
                              </div>
                               <div class="footer-text">          
                               <p>[email protected]</p>
                                                              </div>
                 </div>
                 <div class="col-xs-12 col-sm-4">
                      <div class="footer-icon">
                              <i class="fa fa-phone fa-lg" aria-hidden="true"></i>
                              </div>
                               <div class="footer-text">          
                                  <p>+7 909 628 59 71</p>
                               </div>
                 </div>
             </div>
      </div>
  </div>

I incuded bootstrap from MaxCDN:

<link rel="stylesheet" type="text/css" href="bootstrap-msg.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-msg.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />

Upvotes: 3

Views: 12394

Answers (3)

Kashif Latif
Kashif Latif

Reputation: 677

try to replace col-xs-12 with col-12 only and use following arrangement

col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12

Upvotes: 4

Khagesh
Khagesh

Reputation: 191

col-xs-* has been removed from bootstrap 4 instead of col-xs-* you can directly use col-* ex. col-3 , col-4 its worked for me.

Upvotes: 4

Znaneswar
Znaneswar

Reputation: 3387

col-xs-* has been deprecated in bootstrap V4

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

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content-footer">
      <div class="container">          
             <div class="row">
                 <div class="col-12 col-sm-4">
                      <div class="footer-icon">
                              <i class="fa fa-map-marker fa-lg" aria-hidden="true"></i>
                              </div>
                               <div class="footer-text-block">          
                               <p> 119180, Moscow <br>Malaya Yakimanka,3</p>
                                                              </div>
                 </div>
                 <div class="col-12 col-sm-4">
                      <div class="footer-icon">
                              <i class="fa fa-envelope fa-lg" aria-hidden="true"></i>
                              </div>
                               <div class="footer-text">          
                               <p>[email protected]</p>
                                                              </div>
                 </div>
                 <div class="col-12 col-sm-4">
                      <div class="footer-icon">
                              <i class="fa fa-phone fa-lg" aria-hidden="true"></i>
                              </div>
                               <div class="footer-text">          
                                  <p>+7 909 628 59 71</p>
                               </div>
                 </div>
             </div>
      </div>
  </div>

Upvotes: 15

Related Questions