CODEWITHSUNDEEP
wordpresstwitter-bootstrap
DaniB
DaniB

Reputation: 191

Horizontally Aligning Bootstrap 3.3.5 Columns inside a row in Wordpress

Re: Bootstrap 3.3.5 in Wordpress

I have not seen this issue before. All I want to do is align 3 x .col-md-4 .wells inside a row, but they just won't align. The first div is always a bit higher; see screenshot.

enter image description here

This is the code:

  

<div class="row">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
       <a class="page-scroll" href="#how-to"><div class="home-plans well">
            <br/>
            <h2>1.</h2>
            <p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
        </div> <!-- /well --></a>
    </div> <!-- /col-md-4 -->

    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
        <div class="home-plans well">
            <br />
            <h2>2.</h2>
             <p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
        </div> <!-- /well -->
    </div> <!-- /col-md-4 -->

    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
        <div class="home-plans well">
            <br />
            <h2>3.</h2>
            <p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
        </div> <!-- /well -->
    </div> <!-- /col-md-4 -->
</div>

Using f12 tools in explorer, the issue seems to be the below CSS code styling the row:

/*media all*/
.btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before {
    display: table;
    content: " ";
}

This page is in Wordpress. I have tried the same code in a normal HTML page and the .well .col-md-4s align OK.

To get the cols to align I can just remove the row, but I want to use rows.

This has been killing me for nearly one day now. I have done loads of research and tried using clearfix and clear: both all over without joy. Can anyone shed some light on this please?

Edit: I also note that the two rows in the footer section are causing the page footer to have a scroll bar? So, I have had to remove those rows too. It seems that I can't use rows in Wordpress with Bootstrap anymore for some reason.

Upvotes: 0

Views: 784

Answers (1)

David Wilkinson
David Wilkinson

Reputation: 5118

Hmm, it's really tricky to say without seeing more of the CSS but have you tried reformatting your first div as follows:

<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
   <div class="home-plans well">
     <a class="page-scroll" href="#how-to">
        <br/>
        <h2>1.</h2>
        <p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
      </a>
    </div> <!-- /well -->
</div> <!-- /col-md-4 -->

Then styling the inner anchor element as follows:

CSS:

.well > a {
    display: block;
}

I'd guess that it's something to do with the anchor element wrapping around the .well div?

Upvotes: 1

Related Questions