Twitter Bootstrap Search Box with Icon in NavBar Example

On 11/22/2017 Be the first to comment!

Hi, we'll see how to add icon to search box in twitter bootstrap in this tutorial. It's just one of the unspoken rules of modern web design to include search box on every websites and blogs out there. Especially for content rich sites, having a search box on top will help the users to dig out the archives for the right information. Generally including a search bar on a website's top navigation menu is easy on the eyes. I am not going to discuss here about adding a search bar on bootstrap's navigation bar. As that topic had been already covered in this bootstrap navbar tutorial.

Typically adding a text box along with a search button may just fills out the purpose of a search box but it's sort of old school. So either we can go off without a visible submit button or with a search icon at the end of the search box. We'll better stick on to the latter option here.

Read:

The challenge here is to add a clickable search icon to the end of the search bar that looks great and properly aligned on both desktop and mobile screens. So the best way is to append the icon to the search textbox. In simple terms my idea is to create a bootstrap search box that looks something like this.

bootstrap-search-box-with-icon
Bootstrap Search Box

Bootstrap provides an add-on component called "input-group" that can be used to extend text-based input controls by adding text or buttons before, after or on both sides of the form control.

We are going to use this "input-group" add-on to add a submit button at the end of the text box in the search bar. But the submit button will hold a search icon (from glyphicons) instead of text and by this way we get a clickable icon.

Twitter Bootstrap Search Box with Icon in Navbar:

Let's see how to create bootstrap search box with icon in navbar. You need to load both bootstrap's css and js files in the html file for the navigation menu to work. The bootstrap javascript file is required to show and hide the menu section when navbar is collapsed on devices with smaller screens (like tablet, mobiles).

STEP-1) First make the web page responsive by adding this meta tag to the html file.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

STEP-2) Next include the bootstrap css file within the <head></head> section of the html.

<link href="/path/to/bootstrap.css" rel="stylesheet" type="text/css" />

STEP-3) Load the bootstrap javascript and jquery library just above the closing body (</body>) tag.

<script src="/path/to/jquery-1.10.2.js"></script>
<script src="/path/to/bootstrap.js"></script>

Just make sure you load jquery file before bootstrap js file for it to work.

Note: I have included the non-minified versions of css and js files as this is for development. But remember to use minified versions on production environment.

STEP-4) Finally add the bootstrap navbar component itself. Here we add the logo and the menu items to the left of the navigation menu and the search box at the right side.

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
        <!-- add header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">TravelZ</a>
        </div>
        <!-- add menu -->
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
            </ul>

            <!-- add search form -->
            <form class="navbar-form navbar-right" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search this site">
                    <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">
                        <span class="glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
</nav>

This markup will create a responsive navigation menu that looks best in both desktop and mobile view. Now this is how the navbar will look like.

twitter-bootstrap-navbar-desktop-view
Desktop View - Bootstrap Navbar Search Box with Icon

twitter-bootstrap-navbar-mobile-view
Mobile View - Bootstrap Navbar Search Box with Icon

From the above code, you can see we have created bootstrap inverse navbar with some menu items and search box with icon. Adding "navbar-right" class to the search form aligned it to the right side of the navbar element. To append the submit button to the textbox, we have wrapped up the <button></button> element inside the ".input-group-btn" class.

Also Read:

That's all about creating bootstrap search box with icon in navbar. I hope you like this tutorial. Please don't forget to share it in social networks.

How to Create Responsive Multi Level Drop Down Menu in Bootstrap

On 11/22/2017 1 Comment so far

Hi, I'm back with another one twitter bootstrap tutorials, which discusses about how to create a responsive multi level drop down menu in twitter bootstrap. Building html drop down menu in bootstrap is quite easy as the css framework provides built in components for doing it. But at times you may want to expand the website’s navigation menu into multi-level drop down especially when developing large portals or shopping sites. Unfortunately bootstrap 3.x versions doesn’t provide readymade styles for this but definitely you can accomplish it with some workaround.

If you wish to learn to build simple responsive drop down menu in bootstrap then check out this bootstrap dropdown menu tutorial.

Creating Responsive Multi Level Drop Down Menu in Bootstrap

Though there is no direct way to create multilevel dropdown menu, bootstrap framework is quite flexible and provides excellent base to extend its functionalities. It’s .dropdown-menu css class provides means for adding dropdown menu items and we should extend it to add further levels to the menu.

Step-1: First we should have all the required files in place to start working. So create html file with name ‘index.html’ in your working directory and make sure to include bootstrap's css, javascript and jquery files to it like below.

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/path/to/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>

    ...
    <script src="/path/to/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="/path/to/bootstrap.js" type="text/javascript"></script>
</body>
</html>

Step-2: Now we need to include some custom css styles, so create a stylesheet with name ‘custom.css’ and add the below css styles to it.

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -5px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

Step-3: Now link this custom stylesheet below bootstrap’s css file like this.

<link href="/path/to/custom.css" rel="stylesheet" type="text/css" />

Step-4: Well! We have all the required css styles in place, now it’s time to write up the actual html markup to check if we can build multilevel drop down menu in bootstrap with all the above tweaks. Copy paste the below code to our index file.

<nav class="navbar navbar-inverse" role="navigation">
   <div class="container-fluid">
      <!-- header -->
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#multi-level-dropdown">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="index.html">MyHOME</a>
      </div>
      <!-- menus -->
      <div class="collapse navbar-collapse" id="multi-level-dropdown">
         <ul class="nav navbar-nav">
         <li><a href="#">Kitchen Accessories</a></li>
         <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Interiors<b class="caret"></b></a>
            <ul class="dropdown-menu">
            <li><a href="#">Furnitures</a></li>
            <li><a href="#">Fans</a></li>
            <li class="dropdown-submenu">
               <a href="#" tabindex="-1">Lamps</a>
               <ul class="dropdown-menu">
               <li><a href="#">Ceiling Lamps</a></li>
               <li><a href="#">Table Lamps</a></li>
               <li class="dropdown-submenu">
                  <a href="#" tabindex="-1">Floor Lamps</a>
                  <ul class="dropdown-menu">
                  <li><a href="#">Living Room</a></li>
                  <li><a href="#">Bed Room</a></li>
                  <li><a href="#">Garden Lamps</a></li>
                  </ul>
               </li>
               </ul>
            </li>
            </ul>
         </li>
         <li><a href="#">Bath Fittings</a></li>
         </ul>
      </div>
   </div>
</nav>

As you can see above, we have used the custom css class .dropdown-submenu to the <li> element wherever we want to go one level further down the menu.

Now open the index file in browser and you can see a nicely responsive bootstrap multi level drop down menu.

create-responsive-multilevel-drop-down-menu-in-bootstrap
Responsive Multi-Level Dropdown Menu in Twitter Bootstrap

The complete code for index.html:

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="/path/to/bootstrap.css" rel="stylesheet" type="text/css" />
   <link href="/path/to/custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <!-- bootstrap responsive multi-level dropdown menu -->
   <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
         <!-- header -->
         <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#multi-level-dropdown">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">MyHOME</a>
         </div>
         <!-- menus -->
         <div class="collapse navbar-collapse" id="multi-level-dropdown">
            <ul class="nav navbar-nav">
            <li><a href="#">Kitchen Accessories</a></li>
            <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Interiors<b class="caret"></b></a>
               <ul class="dropdown-menu">
               <li><a href="#">Furnitures</a></li>
               <li><a href="#">Fans</a></li>
               <li class="dropdown-submenu">
                  <a href="#" tabindex="-1">Lamps</a>
                  <ul class="dropdown-menu">
                  <li><a href="#">Ceiling Lamps</a></li>
                  <li><a href="#">Table Lamps</a></li>
                  <li class="dropdown-submenu">
                     <a href="#" tabindex="-1">Floor Lamps</a>
                     <ul class="dropdown-menu">
                     <li><a href="#">Living Room</a></li>
                     <li><a href="#">Bed Room</a></li>
                     <li><a href="#">Garden Lamps</a></li>
                     </ul>
                  </li>
                  </ul>
               </li>
               </ul>
            </li>
            <li><a href="#">Bath Fittings</a></li>
            </ul>
         </div>
      </div>
   </nav>
   <script src="/path/to/jquery-1.10.2.js" type="text/javascript"></script>
   <script src="/path/to/bootstrap.js" type="text/javascript"></script>
</body>
</html>

And that was all about creating responsive multi level drop down menu in twitter bootstrap. If you want to change bootstrap’s navigation menu color, then take a look at this twitter bootstrap navbar customization tutorial.

Recommended Read:

Reference: http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

Make Twitter Bootstrap Jumbotron Background Image Responsive

On 11/22/2017 Be the first to comment!

Hi! I have discussed about working with Bootstrap Jumbotron component a while back. Jumbotron is a light-weight and flexible plug-in provided by bootstrap to showcase the key features of your website or to launch a sales pitch. You can easily design a landing page with jumbotron by adding html elements like texts, links and buttons to it.

By default it contains plain grey background, but what if you want to add an appropriate background image to jumbotron component? And also to make it responsive so that the image span to full width and height of the unit? Yes! You can do it by tweaking bootstrap’s default css code.

make-twitter-bootstrap-jumbotron-background-image-responsive

The beauty of bootstrap framework lies in its responsiveness. Though bootstrap provides separate css class to make images responsive, they are not by default. Here we’ll see how to make the background image of bootstrap jumbotron unit responsive.

Making Twitter Bootstrap Jumbotron Background Image Responsive

Bootstrap readily provides css class named .jumbotron and it transforms a <div> component into a jumbotron unit. The html markup to create jumbotron is,

<div class="jumbotron">
    <div class="container">
        <h1>Tropical Holidays</h1>
        <p>Enjoy Your Holidays at the Tropical Paradise! Feel Home at Our Comfy & Luxurious Resorts with Breaktaking Views!!!</p>
        <p><a class="btn btn-primary btn-lg">Look Here For Best Deals &raquo;</a></p>
    </div>
</div>

Adding css class .container inside the .jumbotron class removes padding (white space) and rounded corners around the edges.

The above markup produces a plain jumbotron component like this,

bootstrap-jumbotron-plain-background-example
Bootstrap Jumbotron With Plain Background

Now to add background image to the unit, we have to tweak bootstrap’s .jumbotron class like this.

.jumbotron {
    background: #000 url("images/banner.jpg") no-repeat center center;
}

But the above css alone doesn’t make the background image responsive. We have to apply another little tweak to it.

.jumbotron {
    background: #000 url("images/banner.jpg") no-repeat center center;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    color: #FFF; // change text color
}

That’s it. This makes the image to span to the full height and width of the unit irrespective of the screen size. Additionally I have changed the jumbotron’s text color to white to make it stand out from the background but this is purely optional.

Now check it out with various screen sizes and you get a jumbotron component with responsive background image like this,

twitter-bootstrap-jumbotron-background-image-responsive
Bootstrap Jumbotron With Responsive Background Image
Also Read:

I hope you got better understanding of making twitter bootstrap jumbotron background image responsive after reading this tutorial. I hope you like it. Please don't forget to share it on your cirlce.

Create Stylish Bootstrap 3 Social Media Icons | How-To Guide

On 11/22/2017 29 Comments so far

Hi, I’m going to show you how to create bootstrap 3 social media icons without images. Yes! We are going to use an icon font library called Font Awesome. It is a scalable vector icon font which is supported by all modern browsers and IE version of 8 or above. It can be used to add social media buttons (ex., Login with Facebook button) or social media icons for websites without images. Also it’s fully compatible with Twitter Bootstrap 3 and we’ll see how to use it for adding social media icons in bootstrap websites.

Did you see the tiny round social media icons in the above image? Awesome isn’t it? Those are css social media icons without using any images. Also they are fully customizable by their size, color and effects, hence the possibilities are unlimited. All we have to do is style the icons with little bit of css code. Font Awesome is not only limited to bootstrap sites and you can use it on any other types of sites built in html/css websites, wordpress blogs etc. Adding the social media icons for websites not built with bootstrap css framework would be the same as the procedure given in this post.

twitter-bootstrap-3-social-media-icons

Creating Bootstrap 3 Social Media Icons for Websites

First let’s include the required bootstrap and font awesome files. You can download and use them locally or load it directly from CDN, which is recommended. For this tutorial sake, I stick to link them from max cdn. Pretty much like any other css stylesheets, you have to link them within the <head></head> section of the html file.

Here in Koding Made Simple we have constantly discussed about creating css buttons without images and customizing bootstrap framework components. I strongly recommend you to read this post on creating css social media icons using font awesome.

<head>
    <title>Bootstrap 3 Social Media Icons Tutorial</title>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Load Bootstrap css-->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!--load font awesome-->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>

Having added the required css files, we’ll insert the social icons into the page with html markup. The font awesome icon classes should be wrapped either inside <i></i> tag or <span></span> tag.

I have given the code for around 20 popular css social media icons and if you want it for some other brands not mentioned here, use it similarly with their corresponding classes. To see the complete list of social media icons available goto http://fontawesome.io and in the top menu select icons >> brand icons.

I’m going to create round social media icons for bootstrap 3 as they are always lucrative. And they will be of medium gray in color with a hover transition to their respective brand colors.

Recommended Read: How to add Search Form to Twitter Bootstrap 3 Navbar

HTML Code for Bootstrap Social Media Icons

Here goes the html code for bootstrap social media icons. Add them in an unordered list.

<div class="social">
    <ul>
        <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-github"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-pinterest"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-flickr"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-vimeo-square"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-stack-overflow"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-dropbox"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-tumblr"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-dribbble"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-skype"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-stack-exchange"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-youtube"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-xing"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-rss"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-foursquare"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-youtube-play"></i></a></li>
    </ul>
</div>

Now we’ll get something like this...

plain-social-media-icons-in-bootstrap-3

Hmm... Not looking good. We have to add css code cleverly to style them.

Recommended Read: How to Create Bootstrap Accordion Menu with Example

CSS Code for Bootstrap Social Media Icons

As we have added the icons in an unordered list, it got stacked one by one as a bulleted list. We have to strip off the bullet points and should align the icons side-by-side with little bit of padding. Here goes it’s css code.

.social {
    margin: 0;
    padding: 0;
}

.social ul {
    margin: 0;
    padding: 5px;
}

.social ul li {
    margin: 5px;
    list-style: none outside none;
    display: inline-block;
}

Next I’ll change the text & background colors and make it round. Also I’ll apply some mild transition effect for smooth mouse hover.

.social i {
    width: 40px;
    height: 40px;
    color: #FFF;
    background-color: #909AA0;
    font-size: 22px;
    text-align:center;
    padding-top: 12px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social i:hover {
    color: #FFF;
    text-decoration: none;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}
bootstrap-3-social-media-icons-normal

Now our bootstrap social media buttons are looking really nice. But we are not yet done.

Still all our bootstrap 3 social media icons will be the same old gray color on hover. We have to change their backgrounds to their brand logo colors.

Here goes the css code.

.social .fa-facebook:hover { /* round facebook icon*/
    background: #4060A5;
}

.social .fa-twitter:hover { /* round twitter icon*/
    background: #00ABE3;
}

.social .fa-google-plus:hover { /* round google plus icon*/
    background: #e64522;
}

.social .fa-github:hover { /* round github icon*/
    background: #343434;
}

.social .fa-pinterest:hover { /* round pinterest icon*/
    background: #cb2027;
}

.social .fa-linkedin:hover { /* round linkedin icon*/
    background: #0094BC;
}

.social .fa-flickr:hover { /* round flickr icon*/
    background: #FF57AE;
}

.social .fa-instagram:hover { /* round instagram icon*/
    background: #375989;
}

.social .fa-vimeo-square:hover { /* round vimeo square icon*/
    background: #83DAEB;
}

.social .fa-stack-overflow:hover { /* round stack overflow icon*/
    background: #FEA501;
}

.social .fa-dropbox:hover { /* round dropbox icon*/
    background: #017FE5;
}

.social .fa-tumblr:hover { /* round tumblr icon*/
    background: #3a5876;
}

.social .fa-dribbble:hover { /* round dribble icon*/
    background: #F46899;
}

.social .fa-skype:hover { /* round skype icon*/
    background: #00C6FF;
}

.social .fa-stack-exchange:hover { /* round stack exchange icon*/
    background: #4D86C9;
}

.social .fa-youtube:hover { /* round youtube icon*/
    background: #FF1F25;
}

.social .fa-xing:hover { /* round xing icon*/
    background: #005C5E;
}

.social .fa-rss:hover { /* round rss icon*/
    background: #e88845;
}

.social .fa-foursquare:hover { /* round foursquare icon*/
    background: #09B9E0;
}

.social .fa-youtube-play:hover { /* round youtube play button icon*/
    background: #DF192A;
}

Well. Our social media icons for bootstrap 3 now looks very colorful on mouse hover.

bootstrap-3-social-media-icons-hover

Here is the complete css code for the social media icons style we have created.

.social {
    margin: 0;
    padding: 0;
}

.social ul {
    margin: 0;
    padding: 5px;
}

.social ul li {
    margin: 5px;
    list-style: none outside none;
    display: inline-block;
}

.social i {
    width: 40px;
    height: 40px;
    color: #FFF;
    background-color: #909AA0;
    font-size: 22px;
    text-align:center;
    padding-top: 12px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social i:hover {
    color: #FFF;
    text-decoration: none;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social .fa-facebook:hover {
    background: #4060A5;
}

.social .fa-twitter:hover {
    background: #00ABE3;
}

.social .fa-google-plus:hover {
    background: #e64522;
}

.social .fa-github:hover {
    background: #343434;
}

.social .fa-pinterest:hover {
    background: #cb2027;
}

.social .fa-linkedin:hover {
    background: #0094BC;
}

.social .fa-flickr:hover {
    background: #FF57AE;
}

.social .fa-instagram:hover {
    background: #375989;
}

.social .fa-vimeo-square:hover {
    background: #83DAEB;
}

.social .fa-stack-overflow:hover {
    background: #FEA501;
}

.social .fa-dropbox:hover {
    background: #017FE5;
}

.social .fa-tumblr:hover {
    background: #3a5876;
}

.social .fa-dribbble:hover {
    background: #F46899;
}

.social .fa-skype:hover {
    background: #00C6FF;
}

.social .fa-stack-exchange:hover {
    background: #4D86C9;
}

.social .fa-youtube:hover {
    background: #FF1F25;
}

.social .fa-xing:hover {
    background: #005C5E;
}

.social .fa-rss:hover {
    background: #e88845;
}

.social .fa-foursquare:hover {
    background: #09B9E0;
}

.social .fa-youtube-play:hover {
    background: #DF192A;
}

Just note the above list of social media icons includes css code for 20 different social networks. Now don’t get excited and line up all these icons in your websites/blogs. Remember to use only the networks in which you are popular. Less is always good.

Also Read: 5 Free Black and White Social Media Icons Sets using CSS and HTML

Final Word

Although you can add social icons anywhere on the website, it will be best if you place these social media icons on bootstrap top navigation bar, footer, side bar or on contact page. Choice is yours.

Related Read: How to Add Social Media Icons to Twitter Bootstrap Top NavBar

Make use of these stylish bootstrap 3 social media icons cleverly and power up your websites and blogs. Find this tutorial helpful? I would appreciate if you return me the favor and share it in your circle :)

How To Create Custom Twitter Bootstrap Buttons With Icons

On 11/22/2017 Be the first to comment!

Twitter Bootstrap makes web development a breeze with all that built-in components and plug-ins. But you cannot always stick on to the default theme provided by bootstrap. Definitely you'll love to see your work to be different from others. Basically it's easier than you think to customize the default bootstrap theme. In this bootstrap tutorial we'll see how to create custom twitter bootstrap buttons with icons and text. Check out our twitter bootstrap tutorials section to learn about customizing bootstrap themes in a simple way.

Glyphicons (Bootstrap Icons)

Bootstrap provides scalable font icons called glyphicons which we can use for images while working with bootstrap. These icons can be used anywhere and with any components like navbar, buttons, form inputs, text etc. To add the glyphicon we should wrap it inside a <span></span> element like this,

<span class="glyphicon glyphicon-user"></span>

Click here for the complete list of available glyphicons in Bootstrap.

Note:- Bootstrap has ditched glyphicons from version 4. Even though it's still in alpha phase you can download it from bootstrap official site and try out. So if you are going for Bootstrap 4, there are some good alternatives for glyphicons. One thing you can try fontawesome.io/ which is a vector font library and very easy to use with bootstrap. Check for the below links to learn about working with font awesome and bootstrap.

Twitter Bootstrap Button with Icon Only

twitter-bootstrap-buttons-with-icons-only

To add images/icons to twitter bootstrap buttons, you have to wrap the above said <span> tag inside the <button></button> element. If you want the button to contain only icons without text then use this,

<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-user"></span></button>
<button type="button" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon glyphicon-stats"></span></button>
<button type="button" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-comment"></span></button>
<button type="button" class="btn btn-warning btn-lg"><span class="glyphicon glyphicon-envelope"></span></button>
<button type="button" class="btn btn-danger btn-lg"><span class="glyphicon glyphicon-remove"></span></button>

But this button will look slightly rectangle in shape. To make it a square add this css code,

.btn-lg {
    padding: 13px 16px;
}

This ensures for equal padding on all sides of the twitter bootstrap button element and make it as square shape.

We have used the css button class "btn-lg" to create a larger button. But you can also try this with other button classes like "btn-sm" or "btn-xs" to create smaller buttons.

Bootstrap Button with Icon and Text

You can also create bootstrap buttons with both icon and text if you prefer. In that case you have to add button caption to the above given html markup.

Bootstrap Button Icon Alignment

Bootstrap provides flexibility to align the icons before or after the text inside a button. Let’s see how to do it.

Align Glyphicon to the Left

twitter-bootstrap-buttons-icons-left

To align the icon to the left of the text in bootstrap button use the html markup like this.

<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-star"></span> Favorite</button>
<button type="button" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon glyphicon-bookmark"></span> Bookmark</button>
<button type="button" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-thumbs-up"></span> Like</button>
<button type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-thumbs-down"></span> Dislike</button>
<button type="button" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-share"></span> Share</button>
<button type="button" class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-envelope"></span> Mail</button>

This will align the icon to the left and text to the right of the button. Make sure you leave a single space between the closing span tag (</span>) and the text to have some space between image and the text.

Align Glyphicon to the Right

If you want the icon to be right aligned to the text inside the bootstrap button, then add the text before the <span> tag.

twitter-bootstrap-buttons-icons-right

Here is the html markup to create one.

<button type="button" class="btn btn-default btn-xs">inbox <span class="glyphicon glyphicon-inbox"></span></button>
<button type="button" class="btn btn-primary btn-xs">Stats <span class="glyphicon glyphicon glyphicon-stats"></span></button>
<button type="button" class="btn btn-success btn-xs">Add <span class="glyphicon glyphicon-plus"></span></button>
<button type="button" class="btn btn-danger btn-xs">Remove <span class="glyphicon glyphicon-minus"></span></button>
<button type="button" class="btn btn-info btn-xs">Edit <span class="glyphicon glyphicon-edit"></span></button>
<button type="button" class="btn btn-warning btn-xs">Print <span class="glyphicon glyphicon-print"></span></button>

Leave a blank space at the end of the text and the <span> tag to add space between the text and the icon.

Related Read:

And that was all about creating custom twitter bootstrap buttons with icons and text.

How to Add Social Media Icons to Twitter Bootstrap NavBar

On 11/22/2017 13 Comments so far

One cannot simply overlook social media marketing in creating brand awareness and the need to implement social sharing icons to websites and blogs. Having social signals on prime spots where the site users cannot miss is a challenging task and top navigation menu is one such place in any website. I have already discussed here about using font-awesome icon font to add social network buttons to bootstrap websites. And this bootstrap tutorial will walk you through in easy steps to add customized social media icons to twitter bootstrap navbar.

Add Social Media Icons To Twitter Bootstrap NavBar

To add social network icons to bootstrap navbar (navigation menu) we need some libraries. First download the required libraries used in this bootstrap tutorial.

Once you have downloaded the files, unzip them and move them to your working folder.

Next you have to include bootstrap, font-awesome and jquery files appropriately in the html file, add some markup and little bit of css styles to start with.

Step-1: Create an html file ‘index.html’ and add the Bootstrap and Font-Awesome css files within the head section of html.

<link href="/path/to/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="/path/to/font-awesome.css" rel="stylesheet" type="text/css" />

Step-2: Next add jQuery and Bootstrap javascript files above the closing body tag (</body>) of html.

<script src="/path/to/jquery-1.10.2.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

Step-3: Having all the required css and js files in place now we have to move on to the task of building navigation menu in twitter bootstrap. Add the below html markup to create navigation menu alias navbar in bootstrap.

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- add header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">TrendZZ</a>
        </div>
        <!-- menu items -->
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Mens</a></li>
                <li><a href="#">Womens</a></li>
                <li><a href="#">Kiddies</a></li>
            </ul>
        </div>
    </div>
</nav>

Now open the ‘index.html’ in browser and you will see a navbar component with some menu items on the left side.

Step-4: Now let us add the social network icons for facebook, twitter, google plus and linkedin to the right side of this navbar. We have to use font-awesome brand icons for this purpose. Lets rewrite the <nav> element markup we have added earlier.

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- add header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">TrendZZ</a>
        </div>
        <!-- menu items -->
        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Mens</a></li>
                <li><a href="#">Womens</a></li>
                <li><a href="#">Kiddies</a></li>
            </ul>
            <!-- social media icons -->
            <ul class="nav navbar-nav navbar-right social">
                <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-lg fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a></li>
                <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a></li>
            </ul>
        </div>
    </div>
</nav>

It’s done!! Now run the html file in browser and you will see nicely scaled little gray colored icons to the right side of the navbar.

twitter-bootstrap-3-social-media-icons-navbar
Font-Awesome Social Media Icons in Bootstrap Navbar

Here comes the best part of twitter bootstrap library. We haven’t written a single piece of css styles of our own but all the social icons are aligned properly in the bootstrap navbar component.

Wonder how this happened? As discussed many times here in www.kodingmadesimple.com, bootstrap has predefined css styles that makes web development lot easier. Though these social media icons looks great, sure enough we have to write down few additional css styles to fine tune the look and behavior of the icons.

Step-5: Create a css stylesheet with name ‘custom.css’ and link it below the bootstrap and font-awesome files to override css styles.

<link href="/path/to/custom.css" rel="stylesheet" type="text/css" />

Step-6: Next add this below css style to the custom css file.

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #777;
}

Step-7: Now you are okay with the above styles but even though the social icons will turn into dark grey on hover state. Let’s add some spice to it and turn on the social icons color to respective brand colors on mouse hover state. Add these additional css styles to ‘custom.css’.

.social .fa-facebook:hover {
    color: #4060A5;
}

.social .fa-twitter:hover {
    color: #00ABE3;
}

.social .fa-google-plus:hover {
    color: #e64522;
}

.social .fa-linkedin:hover {
    color: #0094BC;
}

Now save the files and refresh ‘index.php’ in the browser and viola...!!

All the social networking icons turn out nicely into their brand colors on hover state.

twitter-bootstrap-3-social-media-icons-hover-navbar
Font-Awesome Social Media Icons Hover State in Bootstrap Navbar

Complete HTML Markup for index.html

<!DOCTYPE html>
<html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>Twitter Bootstrap Social Media Icons to Navbar</title>
    <link href="/path/to/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/path/to/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="/path/to/custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- add header -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">TrendZZ</a>
            </div>
            <!-- menu items -->
            <div class="collapse navbar-collapse" id="navbar1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Mens</a></li>
                    <li><a href="#">Womens</a></li>
                    <li><a href="#">Kiddies</a></li>
                </ul>
                <!-- social media icons -->
                <ul class="nav navbar-nav navbar-right social">
                    <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-twitter"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a></li>
                    <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a></li>
                </ul>
            </div>
        </div>
    </nav>
    <script src="/path/to/jquery-1.10.2.js"></script>
    <script src="/path/to/bootstrap.min.js"></script>
</body>
</html>

Complete CSS Code for custom.css

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #777;
}

.social .fa-facebook:hover {
    color: #4060A5;
}

.social .fa-twitter:hover {
    color: #00ABE3;
}

.social .fa-google-plus:hover {
    color: #e64522;
}

.social .fa-linkedin:hover {
    color: #0094BC;
}

And that was all about adding social media icons to bootstrap navbar. If you want to use some other brand icons other than the one given here, then check out this font awesome social media icons in bootstrap tutorial as there are more than twenty different social network icons are given.

Recommended Read:

Read Website / Blog RSS Feed and Display in PHP

On 11/20/2017 Be the first to comment!

Hi, in this post we will see how to read rss feed of a blog, website and display them using php. In case you don't know, RSS stands for 'Really Simple Syndication'. It is a type of web feed used by websites, blogs and other means of online publishing to syndicate the content to its readers. The contents of the rss feed is in xml format. So, to read the feed, you must parse the xml file from the feed url and display the parts of the feed contents one by one in human readable format.

PHP comes with native XML support, so you don't need any third-party tools for doing this. There is also more than one way to read rss feed, one is to use Simple XML Parser and the other is the DOMDocument library which I will show you later in this tutorial.

php read and display rss feed of blog

How to Read RSS Feed in PHP using Simple XML Parser?

Simple XML Parser in PHP supports a native function called simplexml_load_file() to read xml file. This function interprets the xml file into an object array. Below is the small php function to read the rss feed from the given feed url.

It gets the feed contents from an rss url, loops through it and returns the property of each feed item into an array.

<?php
function read_rss_feed($rss_url) {
    $rss = simplexml_load_file($rss_url);
    $rss_feed = array();
    foreach ($rss->channel->item as $item) {
        $node = array (
            'title' => $item->title,
            'link' => $item->link,
            'pubDate' => $item->pubDate,
            'description' => implode(' ', array_slice(explode(' ', $item->description), 0, 40))
        );
        array_push($rss_feed, $node);
    }
    return $rss_feed;
}
?>

Displaying RSS Feed:

Now you have to call the above read_rss_feed() function and display the feed lists wherever you want.

<?php
// read feed
$feed = read_rss_feed('http://wordpress.org/news/feed/');

// set header
header('Content-Type: text/html; charset=utf-8');

echo '<div style="width:60%; margin:0 auto;">';
echo '<h1>RSS Feed List</h1>';

// display rss feed
foreach($feed as $item) {
    echo '<h4><a href="'. $item['link'] .'">' . $item['title'] . '</a></h4>';
    echo '<p>' . $item['pubDate'] . '</p>';
    echo '<p>' . $item['description'] . '</p>';
}
echo '</div>';
?>

Running this script will produce an output like this,

php display rss feed from url

Using DOMDocument Method:

As I said earlier, there is another way to read the rss feeds and that is to use the DOM extension php library. It is a DOM parser which makes it easier for you to read the xml data. The following code shows how to use DOMDocument to work with the rss feed from a url.

<?php
$rss = new DOMDocument();
$rss->load('http://wordpress.org/news/feed/');

// set header
header('Content-Type: text/html; charset=utf-8');

echo '<div style="width:60%; margin:0 auto;">';
echo '<h1>RSS Feed List</h1>';

foreach ($rss->getElementsByTagName('item') as $item) {
    echo '<h4><a href="'. $item->getElementsByTagName('link')->item(0)->nodeValue .'">' . $item->getElementsByTagName('title')->item(0)->nodeValue . '</a></h4>';
    echo '<p>' . $item->getElementsByTagName('pubDate')->item(0)->nodeValue . '</p>';
    echo '<p>' . $item->getElementsByTagName('description')->item(0)->nodeValue . '</p>';
}
echo '</div>';
?>

The above code creates a DOM object and loads the rss feed from a url, then loops through the DOM node one by one to extract the pieces of the feed contents and display it in a readable format.

Also Read:

That explains about reading rss feeds from websites/blogs using php. You can use the native DOM extension or the Simple XML parser to parse xml data and list it. I hope you like this tutorial. If you find it useful, please don't forget to share it in your circle.

Contact Form

Name

Email *

Message *