Twitter Bootstrap Question posted in

Twitter Bootstrap layout totally broken in WordPress template

I’m embedding Twitter Bootstrap into a WordPress template but it was broken. I’m not sure why because the HTML looks exactly as it should be. Here is the result after embedding Twitter Bootstrap:

enter image description here

Here is the content of header.php file:

<?php
/**
 * The template for displaying the header
 *
 * Displays all of the head element and everything up until the "site-content" div.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!--[if lt IE 9]>
    <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
    <![endif]-->
    <?php wp_head(); ?>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site container">
    <!-- <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a> -->
    <div class="row">

        <div id="sidebar" class="sidebar col-xs-12 co-md-4">
            <header id="masthead" class="site-header" role="banner">
                <div class="site-branding">
                    <?php
                        if ( is_front_page() && is_home() ) : ?>
                            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
                        <?php else : ?>
                            <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
                        <?php endif;

                        $description = get_bloginfo( 'description', 'display' );
                        if ( $description || is_customize_preview() ) : ?>
                            <p class="site-description"><?php echo $description; ?></p>
                        <?php endif;
                    ?>
                    <button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
                </div><!-- .site-branding -->
            </header><!-- .site-header -->

            <?php get_sidebar(); ?>
        </div><!-- .sidebar -->

        <div id="content" class="site-content col-xs-12 co-md-8">
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After hours of digging into the Wordpress, I finally got the answer. It's actually pretty tricky since this is not the mistake from embedding Twitter Bootstrap. In the footer.php, it has this function wp_footer which will add skip-link-focus-fix.js to the HTML page.

    Then this javascript file causes the layout broke:

    /**
 * Makes "skip to content" link work correctly in IE9, Chrome, and Opera
 * for better accessibility.
 *
 * @link http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
 */

( function() {
    var ua = navigator.userAgent.toLowerCase();

    if ( ( ua.indexOf( 'webkit' ) > -1 || ua.indexOf( 'opera' ) > -1 || ua.indexOf( 'msie' ) > -1 ) &&
        document.getElementById && window.addEventListener ) {

        window.addEventListener( 'hashchange', function() {
            var element = document.getElementById( location.hash.substring( 1 ) );

            if ( element ) {
                if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.nodeName ) ) {
                    element.tabIndex = -1;
                }

                element.focus();
            }
        }, false );
    }
} )();

  2. 0

    You’ve miss-typed the class on your column div’s

    co-md-4 should be col-md-4
    and
    co-md-8 should be col-md-8

    It’s difficult to say whether that’s the reason that your template is broken, but it’s at least a start.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search