Twitter API Question posted in
The official Twitter API documentation can be found here.

How to determine row height in bootstrap? – Twitter API

I will preface by saying that I have extremely basic knowledge of html and css. I do not know anything really about jquery or bootstrap, even though my website makes use of both of those (I’m making changes to a free template I’d found online) :S. So I apologize in advance for my ignorance.

And so, even though I’ve searched for a solution, I’m not able to understand the other posts that may address the problem I’m experiencing.

The problem:
What’s happening is that bootstrap (I think) seems to have pre-determined (through CSS) the line-height for the rows and my items are going beyond that parameter because of the amount of text and the font-size. And because of that, what’s happening is that the items in the row below are being shifted over (see Figure 1).

Figure 1

I don’t want the second column to be shifted to the right. I want it to be shifted down so that the left ‘wall’ of the first items in each row are flush with one another (see Figure 2).

Figure 2

Normally, I would just adjust the stylesheet but I’ve tried adding a line-height to the .row class and that hasn’t helped and I don’t understand a lot of the bootstrap.min file that came with the template.

I don’t think I can provide attachments here and I’m not even sure which portion of the code is the ‘problem’ so I can’t paste that. The template I am using is Andia, in case that helps.

Thanks in advance for your help.

<head>

    <meta charset="utf-8">
    <title>The Vivid Stroke</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- CSS -->
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/prettyPhoto/css/prettyPhoto.css">
    <link rel="stylesheet" href="assets/css/flexslider.css">
    <link rel="stylesheet" href="assets/css/font-awesome.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">

</head>

<body>

    <!-- Header -->
    <div class="container">
        <div class="header row">
            <div class="span12">
                <div class="navbar">
                    <div class="navbar-inner">
                        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        <h1>
                            <a class="brand" href="index.html">The Vivid Stroke</a>
                        </h1>
                        <div class="nav-collapse collapse">
                            <ul class="nav pull-right">
                                <li>
                                    <a href="index.html"><i class="icon-home"></i><br />Home</a>
                                </li>
                                <li class="current-page">
                                    <a href="portfolio.html"><i class="icon-camera"></i><br />Portfolio</a>
                                </li>
                                <li>
                                    <a href="#"><i class="icon-comments"></i><br />Blog</a>
                                </li>
                                <li>
                                    <a href="services.html"><i class="icon-tasks"></i><br />Services</a>
                                </li>
                                <li>
                                    <a href="about.html"><i class="icon-user"></i><br />About</a>
                                </li>
                                <li>
                                    <a href="contact.html"><i class="icon-envelope-alt"></i><br />Contact</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Page Title -->
    <div class="page-title">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <i class="icon-camera page-title-icon"></i>
                    <h2>Portfolio /</h2>
                    <p>Here is some of my work</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Portfolio -->
    <div class="portfolio portfolio-page container">
        <div class="row">
            <div class="portfolio-navigator span12">
                <h4 class="filter-portfolio">
                    <a class="all" id="active-imgs" href="#">All</a> /
                    <a class="corporate" id="a" href="#">Corporate</a> /
                    <a class="abstract" id="b" href="#">Abstract</a> /
                    <a class="photorealism" id="c" href="#">Photorealism</a>
                </h4>
            </div>
        </div>
            <ul class="portfolio-img">
                <li data-id="p-1" data-type="corporate" class="span3">
                    <div class="work">
                        <a href="assets/img/portfolio/work1.jpg">
                            <img src="assets/img/portfolio/work1.jpg" alt="">
                        </a>
                        <h4>May and Associates Law</h4>
                        <p>This painting hangs in the lobby of May and Associates law offices where dozens of people view the mosaic/abstract hybrid everyday.</p>
                    </div>
                </li>
                <li data-id="p-2" data-type="corporate" class="span3">
                    <div class="work">
                        <a href="assets/img/portfolio/work2.jpg">
                            <img src="assets/img/portfolio/work2.jpg" alt="">
                        </a>
                        <h4>Purple Market</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                    </div>
                </li>
                <li data-id="p-3" data-type="corporate" class="span3">
                    <div class="work">
                        <a href="assets/img/portfolio/work3.jpg">
                            <img src="assets/img/portfolio/work3.jpg" alt="">
                        </a>
                        <h4>Wheels on a Frame</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                    </div>
                </li>
                <li data-id="p-4" data-type="abstract" class="span3">
                    <div class="work">
                        <a href="assets/img/portfolio/work4.jpg">
                            <img src="assets/img/portfolio/work4.jpg" alt="">
                        </a>
                        <h4>Exploding Sky</h4>
                        <p>When the isotope filters are activated, it throws the rows off because of the height of previous items</p>
                    </div>
                </li>
                <li data-id="p-5" data-type="photorealism" class="span3">
                    <div class="work">
                        <a href="assets/img/portfolio/work5.jpg">
                            <img src="assets/img/portfolio/work5.jpg" alt="">
                        </a>
                        <h4>Consectetur Logo</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                    </div>
                </li>
                <li data-id="p-6" data-type="corporate" class="span3">
                    <div class="work">
                        <a href="assets/img/portfolio/work6.jpg">
                            <img src="assets/img/portfolio/work6.jpg" alt="">
                        </a>
                        <h4>Adipisicing Print</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                    </div>
                </li>
                <li data-id="p-7" data-type="corporate" class="span3">
                    <div class="work">
                        <a href="assets/img/portfolio/work7.jpg">
                            <img src="assets/img/portfolio/work7.jpg" alt="">
                        </a>
                        <h4>Elit Website</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                    </div>
                </li>
                <li data-id="p-8" data-type="print-design" class="span3">
                    <div class="work">
                        <a href="assets/img/portfolio/work8.jpg">
                            <img src="assets/img/portfolio/work8.jpg" alt="">
                        </a>
                        <h4>Sed Do Prints</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                    </div>
                </li>
                <li data-id="p-9" data-type="web-design" class="span3">
                    <div class="work">
                        <a href="assets/img/portfolio/work9.jpg">
                            <img src="assets/img/portfolio/work9.jpg" alt="">
                        </a>
                        <h4>Eiusmod Website</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                    </div>
                </li>
                <li data-id="p-10" data-type="logo-design" class="span3">
                    <div class="work">
                        <a href="assets/img/portfolio/work10.jpg">
                            <img src="assets/img/portfolio/work10.jpg" alt="">
                        </a>
                        <h4>Tempor Logo</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                    </div>
                </li>
                <li data-id="p-11" data-type="web-design" class="span3">
                    <div class="work">
                        <a href="assets/img/portfolio/work11.jpg">
                            <img src="assets/img/portfolio/work11.jpg" alt="">
                        </a>
                        <h4>Incididunt Website</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                    </div>
                </li>
                <li data-id="p-12" data-type="print-design" class="span3">
                    <div class="work">
                        <a href="assets/img/portfolio/work12.jpg">
                            <img src="assets/img/portfolio/work12.jpg" alt="">
                        </a>
                        <h4>Ut Labore Print</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                    </div>
                </li>
            </ul>

    </div>


    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="widget span3">
                    <h4>About Us</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                    <p><a href="">Read more...</a></p>
                </div>
                <div class="widget span3">
                    <h4>Latest Tweets</h4>
                    <div class="show-tweets"></div>
                </div>
                <div class="widget span3">
                    <h4>Flickr Photos</h4>
                    <ul class="flickr-feed"></ul>
                </div>
                <div class="widget span3">
                    <h4>Contact Us</h4>
                    <p><i class="icon-map-marker"></i> Address: Via Principe Amedeo 9, 10100, Torino, TO, Italy</p>
                    <p><i class="icon-phone"></i> Phone: 0039 333 12 68 347</p>
                    <p><i class="icon-user"></i> Skype: Andia_Agency</p>
                    <p><i class="icon-envelope-alt"></i> Email: <a href="">[email protected]</a></p>
                </div>
            </div>
            <div class="footer-border"></div>
            <div class="row">
                <div class="copyright span4">
                    <p>Copyright 2012 Andia - All rights reserved. Template by <a href="http://azmind.com">Azmind</a>.</p>
                </div>
                <div class="social span8">
                    <a class="facebook" href=""></a>
                    <a class="dribbble" href=""></a>
                    <a class="twitter" href=""></a>
                    <a class="pinterest" href=""></a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Javascript -->
    <script src="assets/js/jquery-1.8.2.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.flexslider.js"></script>
    <script src="assets/js/jquery.tweet.js"></script>
    <script src="assets/js/jflickrfeed.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="assets/js/jquery.ui.map.min.js"></script>
    <script src="assets/js/jquery.quicksand.js"></script>
    <script src="assets/prettyPhoto/js/jquery.prettyPhoto.js"></script>
    <script src="assets/js/scripts.js"></script>

</body>

Tags:

2

Answers


  1. 0

    Try This. Put as much text you want.

    <div class="work-container">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 work-title wow fadeIn animated" style="visibility: visible; animation-name: fadeIn;">
                <h2>Our Latest Work</h2>
            </div>
        </div>
        // First Row.
        <div class="row">
            <div class="col-sm-3">
                <div class="work wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
                    <img src="assets/img/portfolio/work1.jpg" alt="Lorem Website" data-at2x="assets/img/portfolio/work1.jpg">
                    <h3>Lorem Website</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                    <div class="work-bottom">
                        <a class="big-link-2 view-work" href="assets/img/portfolio/work1.jpg"><i class="fa fa-search"></i></a>
                        <a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="work wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
                    <img src="assets/img/portfolio/work2.jpg" alt="Ipsum Logo" data-at2x="assets/img/portfolio/work2.jpg">
                    <h3>Ipsum Logo</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                    <div class="work-bottom">
                        <a class="big-link-2 view-work" href="assets/img/portfolio/work2.jpg"><i class="fa fa-search"></i></a>
                        <a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="work wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
                    <img src="assets/img/portfolio/work3.jpg" alt="Dolor Prints" data-at2x="assets/img/portfolio/work3.jpg">
                    <h3>Dolor Prints</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                    <div class="work-bottom">
                        <a class="big-link-2 view-work" href="assets/img/portfolio/work3.jpg"><i class="fa fa-search"></i></a>
                        <a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="work wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
                    <img src="assets/img/portfolio/work4.jpg" alt="Sit Amet Website" data-at2x="assets/img/portfolio/work4.jpg">
                    <h3>Sit Amet Website</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                    <div class="work-bottom">
                        <a class="big-link-2 view-work" href="assets/img/portfolio/work4.jpg"><i class="fa fa-search"></i></a>
                        <a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
                    </div>
                </div>
            </div>
        </div>
        // Second Row Here
        <div class="row">
            <div class="col-sm-3">
                <div class="work wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
                    <img src="assets/img/portfolio/work1.jpg" alt="Lorem Website" data-at2x="assets/img/portfolio/work1.jpg">
                    <h3>Lorem Website</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                    <div class="work-bottom">
                        <a class="big-link-2 view-work" href="assets/img/portfolio/work1.jpg"><i class="fa fa-search"></i></a>
                        <a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="work wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
                    <img src="assets/img/portfolio/work2.jpg" alt="Ipsum Logo" data-at2x="assets/img/portfolio/work2.jpg">
                    <h3>Ipsum Logo</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                    <div class="work-bottom">
                        <a class="big-link-2 view-work" href="assets/img/portfolio/work2.jpg"><i class="fa fa-search"></i></a>
                        <a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="work wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
                    <img src="assets/img/portfolio/work3.jpg" alt="Dolor Prints" data-at2x="assets/img/portfolio/work3.jpg">
                    <h3>Dolor Prints</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                    <div class="work-bottom">
                        <a class="big-link-2 view-work" href="assets/img/portfolio/work3.jpg"><i class="fa fa-search"></i></a>
                        <a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="work wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
                    <img src="assets/img/portfolio/work4.jpg" alt="Sit Amet Website" data-at2x="assets/img/portfolio/work4.jpg">
                    <h3>Sit Amet Website</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
                    <div class="work-bottom">
                        <a class="big-link-2 view-work" href="assets/img/portfolio/work4.jpg"><i class="fa fa-search"></i></a>
                        <a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
    Login or Signup to reply.
  2. 0

    Maybe you should try to use “row row-eq-height” classes.

    Try to use <div class="row row-eq-height"></div> instead of <div class="row"></div>

    And add this CSS property to your custom CSS

    .row-eq-height{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search