Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Jonathan Martínez
Jonathan Martínez
13,375 Points
Posted by Jonathan Martínez
Jonathan Martínez
13,375 Points

Centering divs inside another div using Bootstrap?

Hello! This is the situation:

I have a 12columns div with green background; inside of it I have 3 blue 3columns square divs.

How can I center them (them having spaces between them) inside the big green div using Bootstrap? I tried to use col-offset classes, and even block-cebter but it doesn't work.

I could do "dirty cheat" (add a class to the middle square div and add margin left/right properties); but I want to know what's the correct way of doing it using Bootstrap.

Here's an example code. As I mentioned earlier, I want it to be perfectly centered, and as you can see; it's not perfectly centered 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style type="text/css">
        .a {
            background-color: blue;
            height: 200px;
            width: 200px;
        }

        .aa {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="container">
    <nav>
        <div class="col-lg-4">
            <h1>Title</h1>
        </div>
    </nav>
    <div class="aa col-lg-12">
            <div class="a col-lg-3"></div>
            <div class="a col-lg-3 col-lg-offset-3"></div>
            <div class="a col-lg-3 pull-right"></div>
    </div>
</div>
</body>
</html>

2 Answers

Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Jonathan,

I use Bootstrap, and what I would do - and what I perceive as being the simplest, best solution, is to make the col-lg-12 div a flexbox and justify the content with 'space around'.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style type="text/css">
        .a {
            background-color: blue;
            height: 200px;
            width: 200px;
        }

        .aa {
            background-color: green;
            display: flex;
            justify-content: space-around;            
        }
    </style>
</head>
<body>
    <div class="container">
        <nav>
            <div class="col-lg-4">
            <h1>Title</h1>
            </div>
        </nav>

        <div class="aa col-lg-12">            
            <div class="a"></div>
            <div class="a"></div>
            <div class="a"></div>
        </div>
    </div>
</body>
</html>
Robert Richey
PLUS
Robert Richey
Courses Plus Student 16,352 Points
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

If you can compromise on the width, letting those blue divs flex a bit, here is a solution I think you were asking for to begin with.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style type="text/css">
        .a {
            background-color: blue;
            min-height: 200px;            
        }

        .aa {
            background-color: green;                     
        }     
    </style>
</head>
<body>
    <div class="container">        
        <nav>
            <div class="col-lg-4">
            <h1>Title</h1>
            </div>                
        </nav>                

        <div class="aa col-lg-12">                            
            <div class="a col-lg-offset-1 col-lg-2"></div>            
            <div class="a col-lg-offset-2 col-lg-2"></div>            
            <div class="a col-lg-offset-2 col-lg-2"></div>
        </div>               
    </div>
</body>
</html>