CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sergie Waterhouse
Sergie Waterhouse

Reputation: 17

Bootstrap template issue

What I would like to accomplish with Bootstrap:

desktop view
+-------------------------------------------+
|          |                                |
|          |                                |          
|          |                                |
|          |                                |
|          |                                |
|          |                                |
| sidebar  |            content             |
|accordion |                                |
|  menu    |                                |
|          |                                |
|          |                                |
|          |                                |
|          |                                |
|----------|                                |
| submenu  |                                |
+-------------------------------------------+


tablet view
+-------------------------------+
|     |        submenu          |
|     |-------------------------|          
|     |                         |
|     |                         |
|     |                         |
|     |                         |
|side |        content          |
|bar  |                         |
|     |                         |
|     |                         |
|     |                         |
|     |                         |
|     |                         |
|     |                         |
|     |                         |
+-------------------------------+


phone view
+--------------+
|   submenu    |
|--------------|          
|   sidebar    |
|  accordion   |
|    toogle    |
|--------------|
|              |
|              |
|              |
|   content    |
|              |
|              |
|              |
|              |
|              |
+--------------+

What I have done so far:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title></title>
    <!-- Bootstrap core CSS -->
    <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
        <style>
          .row {
          margin-bottom: 20px;
          }
          .row .row {
          margin-top: 10px;
          margin-bottom: 0;
          }
          [class*="col-"] {
          padding-top: 15px;
          padding-bottom: 15px;
          background-color: #eee;
          border: 1px solid #ddd;
          background-color: rgba(86,61,124,.15);
          border: 1px solid rgba(86,61,124,.2);
          } 


        </style>
  </head>

  <body>

  <div class="container">
      <div class="row">
          <div class="col-md-4 col-sm-2 col-xs-12">
              side bar
              <div class="row">
                  <div class="col-md-12 col-xs-12">sub menu</div>
              </div>
          </div>
        <div class="col-md-8 col-sm-10 col-xs-12">content</div>
      </div>
  </div>





    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
  </body>
</html>

Is it really possible to make this sample template with Bootstrap? Any Bootstrap guru here to help me? .............................................

Upvotes: 0

Views: 199

Answers (1)

ppollono
ppollono

Reputation: 3642

Check this fiddle

the trick is take advantage of the Responsive utilities 

http://getbootstrap.com/css/#responsive-utilities

Upvotes: 1

Related Questions