Can DIV be centered on page using bootstrap?

Searched the web for a while... wondering why the code below doesn't center Hello World on a web page.  Should I just use <center> tags?

<link rel="stylesheet" href="/css/bootstrap.css">

<div class="container">
	<div class="row">
		<div style="background-color: #F7F7F7; width: 600px; border-radius: 2px; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3)">
			Hello World
		</div>
	</div>
</div>

Open in new window

Sheldon LivingstonConsultantAsked:
Who is Participating?
 
Tom BeckCommented:
Negative on the <center> tag. Not supported in HTML5.

When you add width:600px to that div you are negating some of the benefits of using Bootstrap, i.e. self-expanding/contracting content areas a.k.a responsiveness.

Take that out and add text-align:center

    background-color: #f7f7f7;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    text-align: center;

Also, get into the habit of using <style> blocks and stylesheets to hold all css. Use inline css only when there's no other way.

Alternately, you can set a max-width:600px. That way the container still responds when the browser window is less than 600px. Add margin:0 auto to center the 600px wide div on the page.

    background-color: #f7f7f7;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    max-width: 600px;
    text-align: center;
0
 
Sheldon LivingstonConsultantAuthor Commented:
Thank you Tom... it seems to me that without using the 600 reference that designing a form will quite cumbersome with things not being rigidly in place.  What if you absolutely wanted a div 600px wide?
0
 
Tom BeckCommented:
Thanks for the points. You may have missed the edit to my post regarding max-width.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Tom BeckCommented:
Even when designing forms, you want them to be responsive in case someone is using a mobile device to enter data. Design the form such that when the screen is narrow, the inputs stack neatly one on top of the other. Avoid using tables. They cannot be made responsive.
0
 
Tom BeckCommented:
Here's a couple of resources for building responsive forms in Bootstrap.

http://bootsnipp.com/forms

http://www.bootply.com/pppeater/jrNvaahcOh
0
 
Sheldon LivingstonConsultantAuthor Commented:
Nice!  Thanks!  I did overlook max-width and margins.
0
 
Sheldon LivingstonConsultantAuthor Commented:
FYI... re-tweaking my design per your "Also, get into the habit of using <style> blocks and stylesheets to hold all css. Use inline css only when there's no other way."  I appreciate the guidance.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.