• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Inline Widgets Using Bootstrap Column Class CSS in Genesis

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

  • Responsive Inline Widgets With Full Width Background

Reader Interactions

Comments

  1. kathy says

    November 14, 2014 at 2:28 pm

    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.

    Log in to Reply
    • Brad Dalton says

      November 14, 2014 at 2:34 pm

      Support provided for members only.

      Log in to Reply
    • Brad Dalton says

      November 14, 2014 at 3:10 pm

      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.

      Log in to Reply
  2. George says

    September 3, 2014 at 9:37 pm

    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?

    Log in to Reply
    • Brad Dalton says

      September 3, 2014 at 9:40 pm

      Hello George.

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

      Log in to Reply
      • George says

        September 9, 2014 at 1:01 pm

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

        Log in to Reply
        • Brad Dalton says

          September 9, 2014 at 1:10 pm

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

          Log in to Reply
          • George says

            September 9, 2014 at 1:56 pm

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

          • George says

            September 10, 2014 at 8:41 pm

            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!)

          • Brad Dalton says

            September 10, 2014 at 9:02 pm

            Add the is_front_page() conditional tag after the function

          • George says

            September 21, 2014 at 6:27 pm

            Great, thanks for your help Brad!

          • Brad Dalton says

            September 21, 2014 at 6:51 pm

            You’re welcome George

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.