CODEWITHSUNDEEP
phpcsstwitter-bootstrapresponsive-design
Anthony
Anthony

Reputation: 11

Why is my bootstrap code not responsive?

I'm building a custom wordpress theme and I was watching my buddy write up code for a page using bootstrap. He made it so that it is centered on his monitor. I believe he is using a 4:3 monitor. When I look at the page on my 24inch widescreen the page is not centered. What am I doing wrong that is making the page not responsive to any screen size? This is my code for the page:

<?php get_header(); ?>

<div class="row">

<div class="span1"></div>

<div class="span8" id="container">
<?php the_post(); ?>
<?php the_content(); ?>
</div>

<div class="span2">
<?php get_sidebar();?>
</div>

<div class="span1"></div>

</div>

<?php get_footer(); ?>


and here is the code for the header:

<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>" />

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

<center>
<div class="row">
    <div class="span3"></div>

<div class="span6">
<div class="logo">
<h1 id="logo-mathew">Mathew J. Mari</h1>
<h3 id="logo-attorney">Attorney At Law</h3>
</div>
</div>

<div class="span3"></div>

</div>
</center>

I am new to using bootstrap so maybe I'm using the wrong syntax for it to be responsive or I've left something out? I just want it to be responsive on all monitors, having it centered and utilizing a 1-8-2-1 column layout. Any help would be greatly appreciated.

Upvotes: 0

Views: 1066

Answers (4)

Reeze Cornelius
Reeze Cornelius

Reputation: 258

It does seem like you are using an older version of Bootstrap. The Newer version mnakes it much easier to center your elements.

Your code with the elements being used inside a container class. One of bootstrap's 3 easier method of centering a div. And with the new bootstrap, the use of class names like col-md-1 , col-md-8 etc will be used. Make sure you read up on Bootstraps' grid system. Makes life much easier for responsive designs

<div class="container">
    <div class="row">
        <div class="col-md-1"></div>
    </div>
    <div class="container">
        <div class="col-md-8">
        <?php the_post(); ?>
        <?php the_content(); ?>
    </div>
    <div class="col-md-2">
        <?php get_sidebar();?>
    </div>
    <div class="col-md-1"></div>
</div>

Upvotes: 1

Amit Mishra
Amit Mishra

Reputation: 291

Add Class .col-centered to your page wrapper div 

.col-centered{
       margin:0 auto;
       float : none;
       display:block;
}

it centered your page in any size monitor

Upvotes: 0

Moiz
Moiz

Reputation: 2439

Firstly you are using the old version of Bootstrap i.e 2.3 and bootstrap has already released the new version 3.0 so please upgrade it.

Now in the version you are using, there is another css that you need to give reference and that is for the responsive. and also add the .container-fluid for your main container.

Upvotes: 0

BobTheCat
BobTheCat

Reputation: 137

container tag is missing must be used over the row and all other tags

Use .container for a responsive fixed width container.

...

Use .container-fluid for a full width container, spanning the entire width of your viewport.

...

Upvotes: 0

Related Questions