Title: Bootstrap hidden function
Last modified: December 8, 2016

---

# Bootstrap hidden function

 *  Resolved [ciccione82](https://wordpress.org/support/users/ciccione82/)
 * (@ciccione82)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/bootstrap-hidden-function/)
 * Hi,
    I added share buttons after posts with this code:
 *     ```
       <h5 class="social_icons"><font color="#777777">Condividi l'articolo sul tuo social preferito</h5>
       <style>
       #social_icons > a {
       	margin: 3px;
       	width: 35px;
       	text-align: center;
       	border-radius: 50%;
       	display: inline-block;
       }
       #social_icons > a.facebook {
       	background: #3b5998;
       }
       #social_icons > a.twitter {
       	background: #00aced;
       }
       #social_icons > a.googlePlus {
       	background: #dd4b39;
       }
       #social_icons > a.linkedin {
       	background: #0077B5;
       }
       #social_icons > a.whatsapp {
       	background: #00E676;
       }
       #social_icons > a > i {
       	color: #fff;
       	font-size: 18px;
       	line-height: 35px;
       }
       </style>
       <div id="social_icons">
   
       	<a class="facebook" target="_blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>"">
       		<i class='fa fa-facebook' aria-hidden='true'></i>
       	</a>
       	<a class="twitter" target="_blank" href="http://twitter.com/home?status=<?php echo urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')); ?>: <?php the_permalink(); ?>">
       		<i class='fa fa-twitter' aria-hidden='true'></i>
       	</a>
       	<a class="googlePlus" target="_blank" href="https://plus.google.com/share?url=<?php the_permalink(); ?>">
       		<i class='fa fa-google-plus' aria-hidden='true'></i>
       	</a>
       	<a class="linkedin" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')); ?>&source=LinkedIn">
       		<i class='fa fa-linkedin' aria-hidden='true'></i>
       	</a>
       <a class="whatsapp" target="_blank" href="whatsapp://send?text=<?php the_permalink(); ?>">
       		<i class='fa fa-whatsapp' aria-hidden='true'></i>
       	</a>
   
       </div>
       ```
   
 * Now, I’ve to use bootstrap function to show whatsapp button only in mobile devices.
   How can I do it?

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

 *  [congthien](https://wordpress.org/support/users/congthien/)
 * (@congthien)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/bootstrap-hidden-function/#post-8530052)
 * Hi [@ciccione82](https://wordpress.org/support/users/ciccione82/),
 * You can use the Bootstrap utilities class to do that. Like this :
 *     ```
       <a class="whatsapp visible-xs" target="_blank" href="whatsapp://send?text=<?php the_permalink(); ?>">
       		<i class='fa fa-whatsapp' aria-hidden='true'></i>
       	</a>
       ```
   
 * Read more here : [http://getbootstrap.com/css/#responsive-utilities](http://getbootstrap.com/css/#responsive-utilities)
 * Hope that helps!
 *  Thread Starter [ciccione82](https://wordpress.org/support/users/ciccione82/)
 * (@ciccione82)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/bootstrap-hidden-function/#post-8530066)
 * It do not works. Why? 🙁
    -  This reply was modified 9 years, 6 months ago by [ciccione82](https://wordpress.org/support/users/ciccione82/).
 *  Thread Starter [ciccione82](https://wordpress.org/support/users/ciccione82/)
 * (@ciccione82)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/bootstrap-hidden-function/#post-8530508)
 * Can you help me please? Do I make a mistake?
 *  [congthien](https://wordpress.org/support/users/congthien/)
 * (@congthien)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/bootstrap-hidden-function/#post-8532882)
 * [@ciccione82](https://wordpress.org/support/users/ciccione82/) : What is your
   site url?
 *  Thread Starter [ciccione82](https://wordpress.org/support/users/ciccione82/)
 * (@ciccione82)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/bootstrap-hidden-function/#post-8535312)
 * This in a simple post of my site. [simple post](http://www.studiofazzari.it/article/)
 *  Thread Starter [ciccione82](https://wordpress.org/support/users/ciccione82/)
 * (@ciccione82)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/bootstrap-hidden-function/#post-8536410)
 * Please help me! I’m going crazy 😢
 *  [congthien](https://wordpress.org/support/users/congthien/)
 * (@congthien)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/bootstrap-hidden-function/#post-8537979)
 * You can add this in Customize => Additional CSS :
 *     ```
       #social_icons .whatsapp { display : none; }
       @media screen and (max-width : 469px ) {
       #social_icons .whatsapp { display : block; }
       }
       ```
   
 * Let me know how it goes!
 *  Thread Starter [ciccione82](https://wordpress.org/support/users/ciccione82/)
 * (@ciccione82)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/bootstrap-hidden-function/#post-8538285)
 * Now it works, but whatsapp icon goes over again into another row. How can I do
   to show it on the same line of the othe icons?
 *  Thread Starter [ciccione82](https://wordpress.org/support/users/ciccione82/)
 * (@ciccione82)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/bootstrap-hidden-function/#post-8538320)
 * I solved using #social_icons .whatsapp { display : inline-block; }
    } thanks
    -  This reply was modified 9 years, 6 months ago by [ciccione82](https://wordpress.org/support/users/ciccione82/).
    -  This reply was modified 9 years, 6 months ago by [ciccione82](https://wordpress.org/support/users/ciccione82/).

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

The topic ‘Bootstrap hidden function’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/onepress/2.3.18/screenshot.png)
 * OnePress
 * [Support Threads](https://wordpress.org/support/theme/onepress/)
 * [Active Topics](https://wordpress.org/support/theme/onepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/onepress/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/onepress/reviews/)

 * 10 replies
 * 2 participants
 * Last reply from: [ciccione82](https://wordpress.org/support/users/ciccione82/)
 * Last activity: [9 years, 6 months ago](https://wordpress.org/support/topic/bootstrap-hidden-function/#post-8538320)
 * Status: resolved