0

I am designinig a template to display a product image[i] and description[d] as following using twitter bootstrap 3 (Thing is I am not able to keep image and description together, they keep jumping around with different screen sizes)

REQUIREMENT:

1) for LARGE and MEDIUM it will be 2 columns

|             |
|[i][d] [i][d]|
|[i][d] [i][d]|
|[i][d]       |
|             |

2) for SMALL it will be like 1 column (description still needs to be on its side)

|        |
| [i][d] |
| [i][d] |
| [i][d] |
| [i][d] |
| [i][d] |
|        |

3) for EXTRA SMALL it will be like 1 column but description will follow image

|   |
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
|[i]|
|[d]|
|   |

PROBLEM:

I have problem here with small screen as I get lot of space between [i] and [d]

|[i]  [d]|
|[i]  [d]|
|[i]  [d]|
|[i]  [d]|
|[i]  [d]|

Also at some screen size (between medium and small) image of one row sticks itself at bottom of previous description

|[i]  [d]|
|     [i]|
|[d]  [i]|
|[d]     |

CODE:

I have the following HTML code that I am trying 

<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="">

    <title>2 Col Portfolio - Start Bootstrap Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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="#">Start Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Services</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div class="container">

        <!-- Page Header -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Page Heading
                    <small>Secondary Text</small>
                </h1>
            </div>
        </div>
        <!-- /.row -->

        <!-- Project Row -->
        <div class="row">
            <div class="col-lg-6"> 
                <div class="col-xs-6 col-sm-3 col-md-4">
                    <a href="#">
                        <img class="img-responsive" src="http://placehold.it/140x200" alt="">
                    </a>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-8">
                    <h3>Project One</h3>
                    <h4>Subheading</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
            <div class="col-lg-6"> <!--I want this to behave like two rows, at small screen at some size image sticks itself at the bottom of previous View Project button-->
                <div class="col-xs-6 col-sm-3 col-md-4">
                    <a href="#">
                        <img class="img-responsive" src="http://placehold.it/140x200" alt="">
                    </a>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-8">
                    <h3>Project One</h3>
                    <h4>Subheading</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
        </div>
        <!-- /.row -->
        <!-- Project Row -->
        <div class="row">
            <div class="col-lg-6"> 
                <div class="col-xs-6 col-sm-3 col-md-4">
                    <a href="#">
                        <img class="img-responsive" src="http://placehold.it/140x200" alt="">
                    </a>
                </div>
                <div class="col-xs-6 col-sm-6 col-md-8">
                    <h3>Project One</h3>
                    <h4>Subheading</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                    <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
                </div>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Pagination -->
        <div class="row text-center">
            <div class="col-lg-12">
                <ul class="pagination">
                    <li>
                        <a href="#">&laquo;</a>
                    </li>
                    <li class="active">
                        <a href="#">1</a>
                    </li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">3</a>
                    </li>
                    <li>
                        <a href="#">4</a>
                    </li>
                    <li>
                        <a href="#">5</a>
                    </li>
                    <li>
                        <a href="#">&raquo;</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Your Website 2014</p>
                </div>
            </div>
            <!-- /.row -->
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery not used yet-->
    <script src="js/jquery.js"></script>
    -->
    <!-- Bootstrap Core JavaScript -->
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

</body>

</html>

Following is custom style.css just in case

body {
    padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

.portfolio-item {
    margin-bottom: 25px;
}

footer {
    margin: 50px 0;
}

h3 {
    margin-top:0;
}

Thanks

Improve this question
1
  • Thanks for explaining this in detail. You code does work awesomely well. Commented Jan 13, 2015 at 13:56

2 Answers 2

Reset to default
1

Several issues:

  1. You didn't nest your columns correctly and neither did the person who answered the question initially. Re-read the docs and look at the examples. When you nest columns inside columns you have to nest the row and use the same structure .row .col- .row .col-

  2. Unnecessary use of col-X-12 in the case of the .page-header and the .pagination and .footer. If something is always fullwidth, don't use the grid system. This is in the documentation.

  3. img-responsive makes images not go past their natural width, but the Bootstrap grid is fluid so at any given viewport width there will be a large gap unless you use larger images to compensate.

  4. Every 12 columns at any given breakpoint requires a .clearfix using a responsive utility class or a new .row.

DEMO: https://jsbin.com/kubele

Mobile first basics:

col-sm = viewports 768px and up so if something is col-sm-4 that's the same as col-md-4 and col-lg-4 and UNDER this will be full width.

col-md = viewports 992px and up so if something is col-md-8 it's the same as col-lg-8 and UNDER that will be full width.

col-lg = viewports 1200px and up so if something is col-lg-8 anything under will be full width.

col-xs = covers all viewport sizes from 0 and up.

CSS:

Notes: Most people agree that 767px is a very high breakpoint for a lot of small viewport situations, to solve this on a case by case basis, and not write a crap load more code, the classes .col-xs-* were used and then CSS is used at the max-width to make the columns go full width. Bootstrap lacks vertical space unless you wrap your .btn in a <p> like all the examples you will find on their site and you'll also notice the lack of image next to text as the margins don't line up out of the box, this has been corrected.

body {
    padding-top: 70px
}
.row.project-row > [class*="col-"] {
    margin-bottom: 2%
}
@media (max-width:380px) { 
    .row.project-row  [class*="col-"] {
        width: 100%
    }
}
@media (min-width:381px) { 
    .project-title {
        margin-top: 0
    }
}

HTML:

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <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="#">Start Bootstrap</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
         <ul class="nav navbar-nav">
            <li>
               <a href="#">About</a>
            </li>
            <li>
               <a href="#">Services</a>
            </li>
            <li>
               <a href="#">Contact</a>
            </li>
         </ul>
      </div>
      <!-- /.navbar-collapse -->
   </div>
   <!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
   <!-- Page Header -->
   <h1 class="page-header">Page Heading
      <small>Secondary Text</small>
   </h1>
   <!-- Project Row -->
   <div class="row project-row">
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- BEGIN grouping -->
      <div class="col-md-6">
         <div class="row">
            <div class="col-sm-4 col-xs-4">
               <a href="#">
               <img class="img-responsive center-block" src="http://placehold.it/300x400" alt="">
               </a>
            </div>
            <!-- /.col-sm-4 col-xs-4 -->
            <div class="col-sm-8 col-xs-8">
               <h3 class="project-title">Project One</h3>
               <h4>Subheading</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
               <p> <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </p>
            </div>
            <!-- /.col-sm-8 col-xs-8 -->
         </div>
         <!-- /.row (nested) -->
      </div>
      <!-- /.col-md-6 -->
      <!-- END grouping -->          
      <!-- after every 12 columns put a clearfix or use a script because it's unlikely that all the boxes are the same height -->
      <div class="clearfix hidden-sm"></div>
   </div>
   <!-- /.row -->
   <hr>
   <!-- Pagination -->
   <div class="text-center">
      <ul class="pagination">
         <li>
            <a href="#">&laquo;</a>
         </li>
         <li class="active">
            <a href="#">1</a>
         </li>
         <li>
            <a href="#">2</a>
         </li>
         <li>
            <a href="#">3</a>
         </li>
         <li>
            <a href="#">4</a>
         </li>
         <li>
            <a href="#">5</a>
         </li>
         <li>
            <a href="#">&raquo;</a>
         </li>
      </ul>
   </div>
   <hr>
   <!-- Footer -->
   <footer>
      <p>Copyright &copy; Your Website 2014</p>
   </footer>
</div>
<!-- /.container -->
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

It looks like you need to be a little more explicit when specifying your columns. You can probably get what you want by specifying the column widths on the immediate children of the row divs.

<div class="row">
   <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <!-- Image Content -->
      </div>
      <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
          <!-- Description -->
      </div>
   </div>
</div>

I made a Bootply as an example.

Improve this answer

2 Comments

True, it is redundant. But for the purpose of explanation in the context of a Q&A site, it's probably better to be more explicit than optimal. It's not like an extra class will break the web. But a missing one may be cause for further questions.
No, it would be better to explain the principles of mobile first and not use redundant classes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.