How to display bootstrap site in the center

By drupalfriend123 on 30 Jun 2016 at 17:56 UTC

Hi,

I am using bootstrap theme in drupal7. I simply like to place the entire site right in the center of the page. I can have about 20% margin in both sides of the screen.

Please see the link for the blocks/regions that I have. I have used the below css to place all the contents in the center. It did not work 100%.

Design.

body.html.front.logged-in.no-sidebars.page-node.page-node-.page-node-112.node-type-page.toolbar.toolbar-drawer {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

Any help/recommendations please?

Comments

Keep it simple.

Sam Moore

he/him

Sandy Hook, CT

commented 30 June 2016 at 19:05

Keep it simple.

body {
    width: 70%;
    margin: 0 auto;
}

============================
Resonetrics: Better Tools for Building Brands
http://resonetrics.com
http://technologyformarketers.com
http://kittenassociates.org
http://www.linkedin.com/in/sammooreatresonetrics

@ drupalfriend123 - Your CSS

Sam Moore

he/him

Sandy Hook, CT

commented 30 June 2016 at 19:44

@ drupalfriend123 - Your CSS selector, as written, will only work on node #112.

Thanks. I will give a try.

drupalfriend123 commented 30 June 2016 at 20:45

Thanks. I will give a try.

So far, I tried this.

drupalfriend123 commented 2 July 2016 at 19:33

So far, I tried this.

body {
width: 70%;
margin: 0 auto;
}

It did not do much. Header which is in the navigation region worked. I had a menu block and about us block. I placed the menu block in top bar and the about us block in footer. Both of these are going outside the body.

I simply like to have two boxes: Box1 and Box2. Box1 is the main screen. I like to place box2 inside box1. All contents will go to box2. Box2 needs to be centered in box1. Any recommendation please?

Design

If you could provide some details, I would really appreciate it.

You'll need to take a good

Sam Moore

he/him

Sandy Hook, CT

commented 2 July 2016 at 21:35

You'll need to take a good hard look at your DOM and stylesheet to see why elements are appearing outside of the <body>.
<body> is meant to be the outside container for all visible elements on your page.
Are other visible elements actually outside the <body></body> tags in the DOM (they shouldn't be), or are some elements marked position:absolute (which takes an element out of the normal flow)?
Is there a public URL for your project?

Can you please help? URL

drupalfriend123 commented 2 July 2016 at 22:07

Can you please help? URL

I was able to fix as follows:

drupalfriend123 commented 2 July 2016 at 23:17

I was able to fix as follows:

In page tpl file, I had

<div class="main-container container">
<footer class="footer container myfooter">

After I removed container class from both, it worked. I do not why it worked but it worked. If you have better answer, please let me know.

In your bootstrap css, the

Sam Moore

he/him

Sandy Hook, CT

commented 3 July 2016 at 01:40

In your bootstrap css, the container class has certain fixed widths - that may have fouled up your layout.
Also your slideshow has certain elements deep inside its element structure that are marked position:absolute, and those may be messing with the slideshow layout in particular.