WP SITES

Log in

Inline Widgets Using Bootstrap Column Class CSS in Genesis

—

by

Brad Dalton

Genesis includes Bootstrap CSS for column classes built in so its supported by any child theme running on the Genesis theme framework.

This enables you to add the column classes to any div, including PHP code which generates widgets.

The benefit of using column classes is, you don’t need to add any additional CSS to display your widgets in columns inline.

inline widgets

Because its already included, you simply add the classes in your PHP as you can see in this code.

This example shows you 3 widgets inline however you can very simply change the one-third to one-half, one-fourth or one-sixth.

3 Widgets Inline

This PHP generates 3 widgets side by by side and goes in your child themes functions file.

Register for full access

Related Tutorials

Comments

12 responses to “Inline Widgets Using Bootstrap Column Class CSS in Genesis”

  1. kathy Avatar
    kathy

    Trying to get the inline widget to display on home only.

    Can you tell me where in your code referenced above, would put this additional statement?

    Add the is_front_page() conditional tag after the function

    Thanks for your help.

    1. Brad Dalton Avatar
      Brad Dalton

      Support provided for members only.

    2. Brad Dalton Avatar
      Brad Dalton

      You can either add the conditional tag after the function or add the code to your front-page.php file.

      I’ve updated the code in the Gist in this post.

  2. George Avatar
    George

    That’s nice! Brad, are these widget areas? And if they are, what’s the difference between this way and another tutorial you have for adding such home top widget areas? Which one should you recommend?

    1. Brad Dalton Avatar
      Brad Dalton

      Hello George.

      There’s no CSS needed using this method plus it actually creates separate widgets unlike many other tutorials.

      1. George Avatar
        George

        That’s nice. Brad, can you please drop some css for a full-width background image? Thanks in advance!

        1. Brad Dalton Avatar
          Brad Dalton

          This is a bit of a loaded question George, so unfortunately I can’t answer it here.

          1. George Avatar
            George

            It’s ok Brad. Thanks for your help anyway!

          2. George Avatar
            George

            Back again for one more question Brad! Can you help me to make this work only for the homepage? (Don’t know how easy this can be!)

          3. Brad Dalton Avatar
            Brad Dalton

            Add the is_front_page() conditional tag after the function

          4. George Avatar
            George

            Great, thanks for your help Brad!

          5. Brad Dalton Avatar
            Brad Dalton

            You’re welcome George

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.