Results 1 to 2 of 2

Thread: Bootstrap in WordPress Page Editor

  1. #1

    Bootstrap in WordPress Page Editor

    Problem solved, I was missing a </div>.

    I am new to Bootstrap but I tried it in the WordPress page editor and it works great to make rows and columns responsive and looks better than the standard one column page width with a narrow column on the right. It turns the easy point and click environment in to more work coding but it looks better. I thought WP was built on Bootstrap or at least compatible but maybe I am not supposed to be doing this?
    <h2>First Group</h2>
    <div class="row">
    <div class="col-md-5">Image1</div>
    <div class="col-md-6">Copy about image1</div>
    <div class="col-md-1">blank space</div>
    </div>
    <div class="row">
    <div class="col-md-5">Image2</div>
    <div class="col-md-6">Copy about image2</div>
    <div class="col-md-1">blank space</div>
    </div>
    <h2>Second Group</h2>
    <div class="row">
    <div class="col-md-5">Image1</div>
    <div class="col-md-6">Copy about image1</div>
    <div class="col-md-1">blank space</div>
    </div>
    <div class="row">
    <div class="col-md-5">Image2</div>
    <div class="col-md-6">Copy about image2</div>
    <div class="col-md-1">blank space</div>
    </div>

    One thing I did notice the whole "Second Group" is moved to the left a couple of letters so that the left margin does not line up. Each group steps to the left and if there are enough groups they soon are off the left side of the page. I tried putting the whole thing in a container but that displayed the full width of my page underneath the narrower right column created by WordPress. Can anyone explain what is happening and give me any tips on how to fix or doing this the proper way? Do I need to use a plugin? Thanks for any help!
    Last edited by techdesigner; 02-13-2016 at 05:17 PM.

  2. #2
    Member
    Join Date
    Nov 2015
    Location
    Cincinnati
    Posts
    68
    Boostrap is a CSS format that works with many web page languages, but it is not specifically the primary build architecture. I use it in a HTML5 builds and also in a ASPX builds.
    Use the "clear-fix" class between the groups (see Bootstrap http://getbootstrap.com/css/ ) for more information.
    I would suggest that you place <h2> tags after the row class rather than before.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •