Centered Div's using Bootstrap

I have a page that might have one div or two or three, depending on what it pulled from a database. I'm able to get the div's to show up but they are always aligned to the left. I have removed the float left to float none but then they are displayed on top of each other, I've placed in display inline-block but when I want to view on smaller screens(mobile) the bottom does not work. I want the div's or div to be centered to the page.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <style>
@import url("bootstrap.css");
@import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css");
.panel-heading{
	cursor: pointer;
}
.col-lg-3{
	float:none;
	display:inline-block;
	margin:auto;
	vertical-align:top;
}
.clickable {
    cursor: pointer;
}    
</style>
    
</head>

<body>
<div id="splash">
		<div class="row">
            <div class="col-xs-12" align="center">
              <h2>Please select an option below to get started</h2>
			  </div>
          </div> 
		<div class="container">
               <div class="col-lg-3">
			<div class="panel panel-default">
				<div class="panel-heading clickable" data-toggle="collapse" data-target="#demo">
					<h3 class="panel-title">Panel 1</h3>
				</div>
				<div id="demo" class="panel-body collapse in">
                   box 1
				</div>
			</div>
		</div>
		<div class="col-lg-3">
			<div class="panel panel-default">
				<div class="panel-heading clickable" data-toggle="collapse" data-target="#demo1">
					<h3 class="panel-title">Panel 2</h3>
				</div>
				<div id="demo1" class="panel-body collapse in">
                    box 2
				</div>
		    </div>
	    </div>         
    </div>
       
</div>


</body>
</html>

Open in new window

ucohockeyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Don't try and manipulate bootstrap.   If you find you are doing that as a work around, just figure something is wrong and there is another way.  You want the helper class center-block http://getbootstrap.com/css/#helper-classes.

Demo http://jsbin.com/pebaza/1/edit

<!DOCTYPE html>
<html>
<head>
  <style>
  #test{width:300px;height:300px;background-color:red;}
  </style>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="col-xs-12">
    <div id="test" class="center-block"></div>
  </div>
</body>
</html>

Open in new window

0
ucohockeyAuthor Commented:
Thanks for the comment and help but has soon as I add a second div it does stay centered but I want them to display from left to right and not on top of each other. I really do appreciate the help just starting to use bootstrap.

<!DOCTYPE html>
<html>
<head>
  <style>
  #test{width:300px;height:300px;background-color:red;}
  </style>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="col-xs-12">
    <div id="test" class="center-block"></div>
    <div id="test" class="center-block"></div>
  </div>
</body>
</html>
                                          

Open in new window

0
SSupremeCommented:
You need to use offset. But to make it work for you, you need to adjust you output code to work in each case.
Lets assume your "centered divs" should be grid class with "-3" at the end (.col-md-3 for example) for start.
To make it centered you need to add 4.5 offset which doesn't exist, so you apply "center-block" class without offset, when you have 2 divs you apply offset "-3" to first element, if you have 3 divs you cannot add 1.5 offset( (12-3*3)/2=1.5), but you can change grid class of one or two or all divs.
Your html output should be different for each case to make it work.
Otherwise, you need to apply fixed width for outer(row) div, if inner div 300px, than 300px for outer div, if two inner divs 300px x2 or 200px and 400px, than 600px for outer div. You can make it on server-side, or client-side using js.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.