Title: Align &quot;buttons&quot;
Last modified: August 22, 2016

---

# Align "buttons"

 *  [sospc95](https://wordpress.org/support/users/sospc95/)
 * (@sospc95)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/align-buttons/)
 * Hi,
 * Is it possible to put on the same line several “buttons” ?
    Because whenever 
   I insert a button he gets below the other.
 * Thank you
 * [https://wordpress.org/plugins/shortcodes-ultimate/](https://wordpress.org/plugins/shortcodes-ultimate/)

Viewing 11 replies - 1 through 11 (of 11 total)

 *  Thread Starter [sospc95](https://wordpress.org/support/users/sospc95/)
 * (@sospc95)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/align-buttons/#post-5510755)
 * Up please 😉
 *  [WebPrezence](https://wordpress.org/support/users/webprezence/)
 * (@webprezence)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/align-buttons/#post-5510756)
 * Hi.
 * I don’t know what Vlad’s answer would be, but if I was trying to accomplish what
   you said you were trying to accomplish, I would do this (**tested and works**):
    - Add the buttons that you want
    - Go to your Text Editor (not your visual editor) to see the code
    - Find your buttons, and then add divs in there, which would result in something
      like this:
 * **<div style=”display:inline;”>**[button url=”[http://www.example.com/&#8221](http://www.example.com/&#8221);
   style=”bubbles” icon=”icon: shield” icon_color=”#99CC99″]Read More! >>[/button]**
   </div><div style=”display:inline;”>**[button url=”[http://www.example.com/&#8221](http://www.example.com/&#8221);
   style=”bubbles” icon=”icon: shield” icon_color=”#99CC99″]Read More! >>[/button]**
   </div><div style=”display:inline;”>**[button url=”[http://www.example.com/&#8221](http://www.example.com/&#8221);
   style=”bubbles” icon=”icon: shield” icon_color=”#99CC99″]Read More! >>[/button]**
   </div>**
 * Once completed, you can switch back to your visual editor, and your divs won’t
   disappear, although you won’t see them.
 * I just tested this, and it does the trick. The key would be the **display:inline**
   of course.
 * Good luck!
 *  [Ramesh (thecodeisclear)](https://wordpress.org/support/users/thecodeisclear/)
 * (@thecodeisclear)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/align-buttons/#post-5510757)
 * Isn’t the default all buttons in a single line? If you check the rendered HTML,
   it is just a bunch of `<a href></a>` and ‘<span></span>`
 * They shouldn’t split to multiple linies. Can you post an example link?
 *  [shahzadnabeelpk](https://wordpress.org/support/users/shahzadnabeelpk/)
 * (@shahzadnabeelpk)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/align-buttons/#post-5510761)
 * “WebPrezence Member” your solution didn’t work for me. I am also also looking
   for the solution. Admin Please reply. Here is the code for buttons:
    [su_button
   url=”Target Page” style=”flat” background=”#2393bc” size=”4″ center=”yes” radius
   =”round” icon=”icon: envelope-o”]Contact[/su_button]
 * [su_button url=”Target Page” style=”flat” background=”#5bb531″ size=”4″ center
   =”yes” radius=”round” icon=”icon: info-circle”]More Info[/su_button]
 * Thanks.
 *  [WebPrezence](https://wordpress.org/support/users/webprezence/)
 * (@webprezence)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/align-buttons/#post-5510762)
 * Shahzadnabeelpk, when implementing what I mentioned up there, please do so in
   your **Text Editor**, not your **Visual Editor**. See this [screen capture](http://i.imgur.com/r0Y1ln3.jpg).
 * So your code in your text editor will look like this:
 * > <div style=”display:inline;”>[su_button url=”Target Page” style=”flat” background
   > =”#2393bc” size=”4″ center=”yes” radius=”round” icon=”icon: envelope-o”]Contact[/
   > su_button]</div><div style=”display:inline;”>[su_button url=”Target Page” style
   > =”flat” background=”#5bb531″ size=”4″ center=”yes” radius=”round” icon=”icon:
   > info-circle”]More Info[/su_button]</div>
 * This will absolutely work, but _only if done in your text editor_. When you switch
   to your visual editor, you should not see the div tags:
 * [su_button url=”Target Page” style=”flat” background=”#2393bc” size=”4″ center
   =”yes” radius=”round” icon=”icon: envelope-o”]Contact[/su_button]
 * [su_button url=”Target Page” style=”flat” background=”#5bb531″ size=”4″ center
   =”yes” radius=”round” icon=”icon: info-circle”]More Info[/su_button]
 * Only in your **text editor** will you see your div tags.
 *  [Ramesh (thecodeisclear)](https://wordpress.org/support/users/thecodeisclear/)
 * (@thecodeisclear)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/align-buttons/#post-5510763)
 * [@shahzadnabeelpk](https://wordpress.org/support/users/shahzadnabeelpk/): Can
   you post a link to the page where you are placing your buttons?
 *  [shahzadnabeelpk](https://wordpress.org/support/users/shahzadnabeelpk/)
 * (@shahzadnabeelpk)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/align-buttons/#post-5510764)
 * Here is the link to page. please help [http://beta.tranzzlate.de/albanischen-sprache/](http://beta.tranzzlate.de/albanischen-sprache/)
 *  [WebPrezence](https://wordpress.org/support/users/webprezence/)
 * (@webprezence)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/align-buttons/#post-5510776)
 * So the div tags ARE working, at least the way I believe you want them to work.
   Here’s what I see in all of my browsers: [Screen Capture](http://i.imgur.com/0q8703y.jpg).
 * And when you’re centering, instead of using the Shortcode Ultimate “Center=Yes”
   command, leave that blank.
 * Instead, add this around your shortcodes, in your **text editor**, not your visual
   editor:
 * > <span style=”text-align:center;”> ** shortcodes here ** </span>
 * So in your text editor, it should look like this:
 * <span style=”text-align:center;”><div style=”display:inline;”>[su_button url=”
   Target Page” style=”flat” background=”#2393bc” size=”4″ center=”yes” radius=”
   round” icon=”icon: envelope-o”]Contact[/su_button]</div><div style=”display:inline;”
   >
    [su_button url=”Target Page” style=”flat” background=”#5bb531″ size=”4″ center
   =”yes” radius=”round” icon=”icon: info-circle”]More Info[/su_button]</div></span
   >
 *  [shahzadnabeelpk](https://wordpress.org/support/users/shahzadnabeelpk/)
 * (@shahzadnabeelpk)
 * [11 years, 3 months ago](https://wordpress.org/support/topic/align-buttons/#post-5510780)
 * buttons are centralized, I also got the same view but I don’t want buttons to
   get below each other, that’s the problem I want you guys to help.
 * Thanks.
 *  [shahzadnabeelpk](https://wordpress.org/support/users/shahzadnabeelpk/)
 * (@shahzadnabeelpk)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/align-buttons/#post-5510794)
 * No help from Plugin Author, very sad 🙁
 *  [kinna28](https://wordpress.org/support/users/kinna28/)
 * (@kinna28)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/align-buttons/#post-5510795)
 * There are two ways you could do this. Either put them each in their own column
   or set it as a button class. You’ll notice in both cases, the shortcodes are 
   within a Row shortcode. This is so that they create a new row that can take up
   the full width of the area you’re dealing with, without interacting with the 
   other things on your page.
    The first way is very direct and easy to just plug
   in. The second way is very useful if you want to reuse the setup elsewhere on
   the site.
 * The first way:
    In the visual editor:
 *     ```
       [su_row]
       [su_column size="1/3"][su_button]Number 1[/su_button][/su_column]
       [su_column size="1/3"][su_button]Number 2[/su_button][/su_column]
       [su_column size="1/3"][su_button]Number 3[/su_button][/su_column]
       [/su_row]
       ```
   
 * The second way uses this on the page:
 *     ```
       [su_row]
       [su_button class="inline"]Number 1[/su_button]
       [su_button class="inline"]Number 2[/su_button]
       [su_button class="inline"]Number 3[/su_button]
       [/su_row]
       ```
   
 * And then this in the Custom CSS properties (You can change the width and margin
   if you don’t want them to be that size. It just makes it standard.):
 *     ```
       .inline {
           display:inline-block;
           width:29%;
           margin:2%;
       }
       ```
   

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Align "buttons"’ is closed to new replies.

 * ![](https://ps.w.org/shortcodes-ultimate/assets/icon-256x256.gif?rev=2547563)
 * [WP Shortcodes Plugin — Shortcodes Ultimate](https://wordpress.org/plugins/shortcodes-ultimate/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/shortcodes-ultimate/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/shortcodes-ultimate/)
 * [Active Topics](https://wordpress.org/support/plugin/shortcodes-ultimate/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/shortcodes-ultimate/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/shortcodes-ultimate/reviews/)

 * 11 replies
 * 5 participants
 * Last reply from: [kinna28](https://wordpress.org/support/users/kinna28/)
 * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/align-buttons/#post-5510795)
 * Status: not resolved