Bootstrap problems with img-responsive and div tags

<div class="container-fluid text-center" style="background-color:#1a242f;">
    <div class="row">
        <div class="col-sm-2">
        </div>
        <div class="imageheader col-sm-4">
            <a target="_blank" rel="nofollow" href="index.php">    
                <img class="img-responsive" src="images/logo & name.jpg">
            </a>
        </div>
        <div class="search col-sm-4" style="padding-left : 12%;">
            <ul class="list-group" style="background-color: #6ABED8;">
                <li>
                    <a target="_blank" rel="nofollow" href="careersatbvimit.php" style="color: white;">
                        Career's At BVIMIT
                    </a>&nbsp;&nbsp;|
                </li>
                <li>
                    <a target="_blank" rel="nofollow" href="studentlogin.php" style="color: white;">
                        &nbsp;&nbsp; Student Login
                    </a>
                </li>
            </ul>
    <br><br><br><br>
          <p class="socialicons" style="color : #f4511e; margin-left: 40%;">
            <a target="_blank" rel="nofollow" href="#" class="fa fa-facebook logo" style="color: #48A6BD"></a>
            <a target="_blank" rel="nofollow" href="#" class="fa fa-twitter logo" style="color: #48A6BD"></a>
            <a target="_blank" rel="nofollow" href="#" class="fa fa-youtube logo" style="color: #48A6BD"></a>
          </p>
        </div>
        <div class="col-sm-2">
        </div>
    </div>
</div>
  1. When I use img-responsive, the image becomes small when the
    browser increases the “tablet-size”. But is perfect for mobile-size and tablet-size browser.
    When I change img-responsive to image-fluid, the image size
    is what i want for the desktop-size browser.
    But the <p> elements gets overlapped on it during the resizing of the browser. Also when I resize the browser to “mobile-size”(using image-fluid), I get a horizontal scroll-bar for my image since it doesn’t resize and stays as it was on desktop-size browser.
    What has to be removed in my code to make it responsive(with height and width being responsive) on all screens?

  2. My second problem is that, i have to use an empty div from left for 2 cols to place my image at the center of the screen (third line from top). Can I place my div(using col-*-*) in the center without using any empty div tags. ? Is there any css code for that ?

  3. I used padding-left : 12% to make the size of the <ul> small and be on the right side of the column. Can it be resized and placed on right without using padding-left ?

For your first problem, i found a quick fix by setting style=”max-width:100%;height:auto;” on your image (max-width prevent the image to overflow, height auto keeps the proportions).

Your second problem is just a bootstrap class you are missing : col-XX-offset-X, in your example you need to set <div class=col-sm-4 col-sm-offset-2>

For your third question, you can avoid the padding by setting on your right aligned element a width and a left marginlike so :

<ul class=”list-group” style=”background-color: #6ABED8;width:60%;margin:0 0 0 auto”>

Hope that helps