Issues with Bootstrap 3 when laying out page

HTML & CSS
1

I’ve an issue with getting the div’s to align correctly in Bootstrap.

I want four divs within one div and this big div to be aligned beside one of the same size.

This is working, however the alignment is out of sync. The div that contains the four divs(consists of two on top and two below) are not in line with the upper row which contains 4 divs of equal width.

The lower div which covers col-sm-6 should show the image as having the same width as the last two divs in the upper row. This is also slightly off in alignment.

I’d be grateful if someone could help me to get this aligning correctly.

My code is below:



<div class="row">
                <div class="col-sm-3 portfolio-item">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/submarine.png" class="img-responsive" alt="" />
                    </a>
                </div>

		<div class="col-sm-3 portfolio-item">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/submarine.png" class="img-responsive" alt="" />
                    </a>
                </div>

		<div class="col-sm-3 portfolio-item">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/submarine.png" class="img-responsive" alt="" />
                    </a>
                </div>

		<div class="col-sm-3 portfolio-item">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/submarine.png" class="img-responsive" alt="" />
                    </a>
                </div>
</div>

<div class="row">

<div class="col-sm-6 portfolio-item">

		<div class="col-sm-6 portfolio-item">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/submarine.png" class="img-responsive" alt="" />
                    </a>
                </div>

		<div class="col-sm-6 portfolio-item">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/submarine.png" class="img-responsive" alt="" />
                    </a>
                </div>

		<div class="col-sm-6 portfolio-item">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/submarine.png" class="img-responsive" alt="" />
                    </a>
                </div>

		<div class="col-sm-6 portfolio-item">
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
                        <div class="caption">
                            <div class="caption-content">
                                <i class="fa fa-search-plus fa-3x"></i>
                            </div>
                        </div>
                        <img src="img/portfolio/submarine.png" class="img-responsive" alt="" />
                    </a>
                </div>

            </div>


		<div class="col-sm-6">


                        <img src="img/portfolio/submarine.png" class="img-responsive" alt="" />
			
                </div>

</div>
2

Hi, seannie.

We need to see the CSS (and images) that affects this HTML so we can demonstrate the problem locally.

The best ways to do that are:
(1 - ideally) post a cut-down working page with the CSS and HTML (and images or links to them, if necessary) that demonstrates the problem. Notice that I said “cut-down” working page. By creating a minimal page that demonstrates the problem, you might be able to spot the problem yourself. At the very least, though, it makes it easier for us to evaluate the problem.
(2) post a link to your site so we can see the problem.

The code that you have posted is indeed “cut-down” HTML but renders blank on a test page without the Bootstrap framework CSS, your local CSS, and the images, etc.

We need to see a bit more. :slight_smile:

3

I’m using the default bootstrap.min.css that comes with the Bootstrap download. I haven’t messed with the css files yet so I haven’t tampered with the structure.

4

What are the dimensions of submarine.png, please?

5

Hi,

When you nest columns you must nest them inside another row because the row class has negative margin offsets to pull the inner content to the edges.

e.g. like this:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.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]-->

<style>
.row img {
	width:200px;
	height:200px;
	display:block;
	background:red
}
</style>
</head>
<body>
<div class="container">
		<div class="row">
				<div class="col-sm-3 portfolio-item"> <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
						<div class="caption">
								<div class="caption-content"> <i class="fa fa-search-plus fa-3x"></i> </div>
						</div>
						<img src="img/portfolio/submarine.png" class="img-responsive" alt="" /> </a> </div>
				<div class="col-sm-3 portfolio-item"> <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
						<div class="caption">
								<div class="caption-content"> <i class="fa fa-search-plus fa-3x"></i> </div>
						</div>
						<img src="img/portfolio/submarine.png" class="img-responsive" alt="" /> </a> </div>
				<div class="col-sm-3 portfolio-item"> <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
						<div class="caption">
								<div class="caption-content"> <i class="fa fa-search-plus fa-3x"></i> </div>
						</div>
						<img src="img/portfolio/submarine.png" class="img-responsive" alt="" /> </a> </div>
				<div class="col-sm-3 portfolio-item"> <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
						<div class="caption">
								<div class="caption-content"> <i class="fa fa-search-plus fa-3x"></i> </div>
						</div>
						<img src="img/portfolio/submarine.png" class="img-responsive" alt="" /> </a> </div>
		</div>
		<div class="row">
				<div class="col-sm-6 portfolio-item">
						<div class="row">
								<div class="col-sm-6 portfolio-item"> <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
										<div class="caption">
												<div class="caption-content"> <i class="fa fa-search-plus fa-3x"></i> </div>
										</div>
										<img src="img/portfolio/submarine.png" class="img-responsive" alt="" /> </a> </div>
								<div class="col-sm-6 portfolio-item"> <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
										<div class="caption">
												<div class="caption-content"> <i class="fa fa-search-plus fa-3x"></i> </div>
										</div>
										<img src="img/portfolio/submarine.png" class="img-responsive" alt="" /> </a> </div>
								<div class="col-sm-6 portfolio-item"> <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
										<div class="caption">
												<div class="caption-content"> <i class="fa fa-search-plus fa-3x"></i> </div>
										</div>
										<img src="img/portfolio/submarine.png" class="img-responsive" alt="" /> </a> </div>
								<div class="col-sm-6 portfolio-item"> <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
										<div class="caption">
												<div class="caption-content"> <i class="fa fa-search-plus fa-3x"></i> </div>
										</div>
										<img src="img/portfolio/submarine.png" class="img-responsive" alt="" /> </a> </div>
						</div>
				</div>
				<div class="col-sm-6"> <img src="img/portfolio/submarine.png" class="img-responsive" alt="" /> </div>
		</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<!-- Latest compiled and minified JavaScript --> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>

I wasn’t sure what you were doing in the right column exactly but if you are nesting more columns then you need another row there also.

(When Ron asked for a working example this is what he meant :))