CODEWITHSUNDEEP
androidhtmlcsstwitter-bootstrap
Luboš Suk
Luboš Suk

Reputation: 1546

Bootstrap column layout for all devices

I have a question about bootstrap column layout. Is it necessary to specify the column layout for each device width? For example, I would like to have some item detail, which will take half of screen in the center. So I made a wrapper div with classes col-*-6 and col-*-offset-3 (so it will take six columns and offset it 3 columns).

Then, in this element, I will have children that will take 3 columns and one which will take 9 to fill the full width of the container. 

<div class="col-md-6  col-md-offset-3 toppad">
   <table>
   <tr><td class="col-md-3">Project ID:</td><td class="col-md-9">{$project['name']}</td></tr> 
   </table>
</div>

Is this correct? And is it possible to make it work for all devices without coding each of them?

Upvotes: 0

Views: 2433

Answers (1)

AngularJR
AngularJR

Reputation: 2762

Luboš Suk, Hi there.

Your main question (need all classes)... Yes it is.
If you want to control how you want this to be viewed on all devices you need to use all col-xx-xx classes...
Or choose the correct single class like I show in my demo here for you.
If you use col-xs-xx rather than col-md-xx this way can work too.

Your option of the Red and Grey blocks only using one col-md-xx class will not work like you want it too, for both to stay side by side.

You will see the Red and Grey blocks only use your col-md-xx and they both loose where they need to be. They start to Stack.

The way to place the main block in the middle is right....But.... When you use col-xx-offset-x and you want/need the div block to go full screen on a small device you do have to zero this class at this view.

The second block in the demo shows when you can control the Offset to go full width.

If you want a little more control of therow width look at the bottom option in this demo.

Here is the Fiddle.

enter image description here

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.spacer {
  margin-top: 2%;
  margin-bottom: 2%;
}
.glyph-text {
  color: darkorange;
  font-size: 1.3em; 
}
.block {
  min-height: 200px;  
  background-color: darkorange;
}
.block1 {
  min-height: 50px;  
  background-color: darkorange;
}     
.block2 {
  color: #fff; 
  min-height: 40px;
  margin-top: 2%;
  margin-bottom: 2%;  
  background-color: blueviolet;
}
.block3 {
  min-height: 40px;
  margin-top: 2%;
  margin-bottom: 2%; 
  background-color: steelblue;
}
.block-a {
  color: #fff; 
  height: 40px;
  margin-top: 2%;
  margin-bottom: 2%;  
  background-color: red;
}
.block-b {
  color: #fff; 
  height: 40px;
  margin-top: 2%;
  margin-bottom: 2%; 
  background-color: grey;
}     
.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;  
}
.center-row {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;  
}    
</style>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top ">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

   
<div class="container col-lg-12">
    <div class="text-center">
        <h3>The RED and GREY blocks only use the one col-md-xx class.</h3>
    </div> 
    <div class="row col-md-6 col-md-offset-3 block">
        
        <div class="col-md-9 block-a">
            col-md-9
            <p class="text-center">
                <span class="glyphicon glyphicon-remove"></span>
            </p> 
        </div>
        <div class="col-md-3 block-b">
            col-md-3
            <p class="text-center">
                <span class="glyphicon glyphicon-remove"></span>
            </p>
        </div>
        
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 block2">
            col-ALL-9
            <p class="text-center">
                <span class="glyphicon glyphicon-ok glyph-text"></span>
            </p>
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 block3">
            col-ALL-3
            <p class="text-center">
                <span class="glyphicon glyphicon-ok glyph-text"></span>
            </p>
        </div>
        
        <div class="col-xs-9 block2">
            col-xs-9
            <p class="text-center">
                <span class="glyphicon glyphicon-ok glyph-text"></span>
            </p> 
        </div>
        <div class="col-xs-3 block3">
            col-xs-3
            <p class="text-center">
                <span class="glyphicon glyphicon-ok glyph-text"></span>
            </p> 
        </div>
        <div class="text-center">
            row col-md-6 col-md-offset-3
        </div>
    </div>
         
</div><!-- /.container -->
    
    
<div class="container col-lg-12 spacer"></div>    
    

    
<div class="container col-lg-12">

<div class="row col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 block1">
                
    <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 block2">
        col-ALL-9
        <p class="text-center">
            <span class="glyphicon glyphicon-ok glyph-text"></span>
        </p> 
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 block3">
        col-ALL-3
        <p class="text-center">
            <span class="glyphicon glyphicon-ok glyph-text"></span>
        </p> 
    </div>
    
    <div class="col-xs-9 block2">
        col-xs-9
        <p class="text-center">
            <span class="glyphicon glyphicon-ok glyph-text"></span>
        </p> 
    </div>
    <div class="col-xs-3 block3">
        col-xs-3
        <p class="text-center">
            <span class="glyphicon glyphicon-ok glyph-text"></span>
        </p> 
    </div>
    <div class="text-center">
        row col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3
    </div> 
    </div>
         
</div><!-- /.container -->    
    
    
<div class="container col-lg-12 spacer"></div>
    
       
<div class="container col-lg-12">

    <div class="row col-xs-11 col-sm-9 col-md-7 col-lg-5 block center-row">
        
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 block2">
            col-ALL-9 
        </div>
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 block3">
            col-ALL-3 
        </div>
        
        <div class="col-xs-9 block2">
            col-xs-9 
        </div>
        <div class="col-xs-3 block3">
            col-xs-3 
        </div>
        
        <div class="text-center">
            row col-xs-11 col-sm-9 col-md-7 col-lg-5
            <p>The row is not using any OFFSET.</p>
            <p>The row is centered, using custom css.</p>
        </div>    
    </div>
         
</div><!-- /.container -->


    <!-- Bootstrap core JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
</body>
</html>

Upvotes: 2

Related Questions