1

I think I looked everywhere and tried everything. I want to make a footer for a website with 3 columns - in each one there's h4 header and image (png icon). Instead of getting 3 columns I got 1 column with everything stacked under each other. HTML code:

<div class="footer">
      <div class="container">
        <div class="row">
          <div class="col-sm-4">
            <h4>Instagram</h4>
            <a href="#" target="_blank"/><img src="img/instagram.png"/></a>
          </div>
          <div class="col-sm-4">
            <h4>Facebook</h4>
            <a href="#" target="_blank"/><img src="img/facebook.png"/></a>
          </div>
          <div class="col-sm-4">
            <h4>LinkedIn</h4>
            <a href="#" target="_blank"/><img src="img/linkedin.png"/></a>
          </div>
        </div>
      </div>
    </div>

Any reason why? Thanks in advance.

Aman Kumar
  • 4,533
  • 3
  • 18
  • 40
Mariusz S.
  • 81
  • 1
  • 1
  • 6

3 Answers3

0

Replace all entities of <a href="#" target="_blank"/> with <a href="#" target="_blank"> and will be happy!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h4>Instagram</h4>
        <a href="#" target="_blank"><img src="img/instagram.png"/></a>
      </div>
      <div class="col-sm-4">
        <h4>Facebook</h4>
        <a href="#" target="_blank"><img src="img/facebook.png"/></a>
      </div>
      <div class="col-sm-4">
        <h4>LinkedIn</h4>
        <a href="#" target="_blank"><img src="img/linkedin.png"/></a>
      </div>
    </div>
  </div>
</div>
Alexander
  • 4,420
  • 7
  • 27
  • 42
  • Just to contribute with discussion, in my case I haven't any error on tags, but I had to change the col-*-4 to 32% in css , and everything works fine – MCunha98 Sep 11 '19 at 14:19
0

1st:

<a href="#" target="_blank"/><img src="img/instagram.png"/></a>

Should be

<a href="#" target="_blank"><img src="img/instagram.png"></a>

For img there is not need to close it with / REF: Do I need a "/" at the end of an <img> or <br> tag, etc.?

2nd: use col-xs-4 if you want them to always be 3 item in one row. (all screen size will fall into the xs if nothing else is defined (lg/md/sm etc))

3rd: could be your reference not setup properly. try those:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-xs-4">
        <h4>Instagram</h4>
        <a href="#" target="_blank"><img src="img/instagram.png"></a>
      </div>
      <div class="col-xs-4">
        <h4>Facebook</h4>
        <a href="#" target="_blank"><img src="img/facebook.png"></a>
      </div>
      <div class="col-xs-4">
        <h4>LinkedIn</h4>
        <a href="#" target="_blank"><img src="img/linkedin.png"></a>
      </div>
    </div>
  </div>
</div>
Dalin Huang
  • 11,212
  • 5
  • 32
  • 49
0

The reason why you are not getting the results you expect from bootstrap is likely due to you missing a resource.

Please make sure that you have the following included in the section of your document.

    <head> 
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head> 

CodePen example: https://codepen.io/CapySloth/pen/gRGNxa