CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapresponsive-design
yeeen
yeeen

Reputation: 4945

How to create the following responsive layout with bootstrap?

I want to achieve these:

Computer view:

Computer view

Tablet Portrait view:

Tablet Portrait view

Mobile Portrait view:

Mobile Portrait view

Currently I have this following code, where the "home-content" part will generate the items#1-items#X:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../_lib/bootstrap/dist/css/bootstrap-theme.css">
    <link rel="stylesheet" href="../_lib/normalize.css/normalize.css">
    <link rel="stylesheet" href="index.css">
    <script src="../_lib/jquery/jquery.min.js"></script>
    <script src="../_lib/jquery/jquery.fittext.js"></script>
    <script src="../_lib/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="index.js"></script>
    <title></title>
</head>
<body>
<script>
    init();
</script>
<div class="home-bg"></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="home-noti">
                <div class="news-noti">
                    <div class="news-panel panel">
                        <div class="news-title panel-heading">
                            <h2 class="panel-title">NEWSFLASH!</h2>
                        </div>
                        <div class="news-items-wrapper">
                            <ul id="news-items" class="news-items list-group"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div id="home-content" class="home-content"></div>
        </div>
    </div>
</div>


</body>
</html>

This piece of code can achieve the "Computer view" and "Tablet Portrait view". I could have done it in using 4 of "col-md-3" but that will mean sometimes I might get Notifications col with 2 items on the same row OR Notifications col with 1 item on the same row, which is not what I want. How do I achieve the "Mobile Portrait view" without breaking the layout of the previous 2?

Upvotes: 0

Views: 878

Answers (4)

nabeel
nabeel

Reputation: 214

Use this :

<div class="container">
    <div class="col-md-3 col-sm-12 col-xs-12">
        <div class="col-xs-12 notification">
            <p>Notifications</p>
        </div>
    </div>
    <div class="col-md-9 col-sm-12 col-xs-12">
        <div class="row">
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 1</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 2</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 3</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 4</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 5</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 6</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 7</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 8</p>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <div class="col-xs-12 item">
                    <p>Item # 9</p>
                </div>
            </div>
        </div>
    </div>
</div>

And this style will help to get a better look :

.notification {
    background-color:#000;
    height:auto;
    padding-top: 50px;
    padding-bottom:50px;
    margin-bottom:10px;
}
.item {
    background-color:#333;
    height: auto;
    margin-bottom:10px;
}
p {
    color:#ffffff;
}

Here is the fiddle : http://jsfiddle.net/xwmmfu0e/

Upvotes: 0

Yash Barot
Yash Barot

Reputation: 21

Try to figure out Bootstrap Gird Options and you just Need to know when to use which class for which screen and you are good to go. Here is the working structure for your reference.

 <div class="row">
  <div class="left-block col-lg-4 col-md-12 col-xs-12">
    Aside Section
  </div>
  <div class="content-block col-lg-8 col-md-12 col-xs-12">
    <div class="row" style="padding:10px;">
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 1</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 2</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 3</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 4</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 5</div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" style="border:1px solid">Item 6</div>
    </div>
  </div>
</div>

Upvotes: 2

vanburen
vanburen

Reputation: 21653

You can use nested columns for this.

row
  col-*-*
    row
      col-*-*
    row
      col-*-*

Review the Docs and view working example at Full Screen then reduce the viewport.

/**FOR DEMO PURPOSES ONLY**/

html,
body {
  margin-top: 50px;
  text-align: center;
}
.alert.alert-info {
  height: 100px;
  border-radius: 0;
}
.alert.alert-info-tall {
  height: 340px;
  border-radius: 0;
}
/**FOR DEMO PURPOSES ONLY**/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-4">
      <div class="row">
        <div class="col-sm-12">
          <div class="alert alert-info alert-info-tall">Notifications</div>
        </div>
      </div>
    </div>
    <div class="col-lg-8">
      <div class="row">
        <div class="col-sm-4">
          <div class="alert alert-info">1</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">2</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">3</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">4</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">5</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">6</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">7</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">8</div>
        </div>
        <div class="col-sm-4">
          <div class="alert alert-info">9</div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Michelle Netto
Michelle Netto

Reputation: 29

You need to add an xs prefix. Try this adding col-xs-6 to both divs.

<div class="col-md-3 col-xs-6">
...
</div>
...
<div class="col-md-9 col-xs-6">
            ...
</div>

Upvotes: -1

Related Questions