HTML Boostrap columns are not aligned properly

Question

So I'm trying to display a grid of pictures (4x3) using bootstrap in HTML. However, when I check the code the columns of pictures are there but they're not aligned properly. It looks like this: Image

My code looks like this:

 <body>
<div class="container">
    <div class="row">
        <br>
        <div class="col-lg-12 col-md-6"><h1><b>Storyboards</b></h1></div>
    </div>
</div>

<div class="container"> <!--storyboard pages-->
        <div class="row">
            <div class="col-lg-3">
                <img src="lc01.jpeg"  alt="test">
            </div>
                <div class="col-lg-3">
                <img src="lc02.jpeg"  alt="test">
            </div>
                <div class="col-lg-3">
                <img src="lc03.jpeg"  alt="test">
            </div>
            <div class="col-lg-3">
                <img src="lc04.jpeg"  alt="test">
        </div>
        <div class="row">
            <div class="col-lg-3">
                <img src="lc01.jpeg"  alt="test">
            </div>
                <div class="col-lg-3">
                <img src="lc02.jpeg"  alt="test">
            </div>
                <div class="col-lg-3">
                <img src="lc03.jpeg"  alt="test">
            </div>
            <div class="col-lg-3">
                <img src="lc04.jpeg"  alt="test">
        </div>
</div>

<style>
img{
    width:280px;
    height:420px;
    border:1px solid #000000;
    margin-bottom: 12px;
    }

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

If anyone could explain to me what mistake I'm making that would be very helpful. Thank you

Answer 1

You aren't closing your last column in either row:

<div class="col-lg-3">
    <img src="lc04.jpeg"  alt="test">

Answer 2

Please check that you have missed the closing div for the rows ( or closing div for las column )

<div class="row">
    <div class="col-lg-3">
    </div>
</div>

HTML Boostrap columns are not aligned properly

Question

2 answers

solution1
3 ACCPTED 2016-07-01 15:35:27

solution2
-1 2016-07-01 16:09:44

HTML Boostrap columns are not aligned properly

Question

2 answers

solution1 3 ACCPTED 2016-07-01 15:35:27

solution2 -1 2016-07-01 16:09:44

solution1
3 ACCPTED 2016-07-01 15:35:27

solution2
-1 2016-07-01 16:09:44