How to create responsive top bar in bootstrap 3.7

Discussion in 'Web Design' started by ArayNott, Sep 10, 2017.

  1. ArayNott

    ArayNott Registered Member

    Joined:
    Sep 8, 2017
    Messages:
    6
    Likes Received:
    0
    I'm creating this code but this is not responsive please help me
    PHP:
    <body>
        <
    div class="top_bar">
            <
    div class="container">
                <
    div class="row">
                    <
    div class="col-md-6 con">
                    <
    h7>Emailinfo@simplexpipe.in Call: +91 98300 98300</h7>
                    </
    div>
                    <
    div class="col-md-3 icon">
                        <
    a href="#" class="social_icon"><class="fa fa-facebook" aria-hidden="true" style="font-size:18px;"></i></a>
                        <
    a href="#" class="social_icon"><class="fa fa-twitter" aria-hidden="true" style="font-size:18px;" ></i></a>
                        <
    a href="#" class="social_icon"><class="fa fa-google-plus" aria-hidden="true" style="font-size:18px;"></i></a>
                    </
    div>
                </
    div>
            </
    div>
        </
    div>

    body{
        
    margin:0px;
    }
    *{
        
    padding:0px;
        
    margin:0px;
    }
    .
    top_bar{
        
    width:100%;
        
    height:30px;
        
    background-color:#DFDFDF;
    }
    .
    con h7{
        
    font-size:12px;
        
    line-height:30px;
    }
    .
    icon{
        
    float:right;

    }
    .
    social_icon{
        
    margin-left:10px;
        
    line-height:30px;
    }
    .
    social_icon .fa-facebook:hover{
        
    color:#C10407;
    }
     
  2. RechardSmith

    RechardSmith Registered Member

    Joined:
    Sep 10, 2017
    Messages:
    6
    Likes Received:
    0
    Bootstrap isn't really my thing, but I do have some limited knowledge of it. One rule is that a row must have columns that add up to 12.
    In your code, you have a row with one element that is 6 cols and another with just 3 cols. That adds up to only 9 cols, so won't work.
    Another thing you are doing that is bad for responsiveness is setting heights for elements, don't do that, let the content define the height.
     
  3. Sergio Duran

    Sergio Duran Staff
    Staff Member

    Joined:
    Feb 4, 2015
    Messages:
    128
    Likes Received:
    15

Share This Page