Twitter Bootstrap Question posted in

Issue aligning footer text center – Twitter bootstrap

After I added the bootstrap portfolio grid template I have difficulty centering the text in my footer. Width is already 100% and the text is aligned center as well in the CSS. Does anyone know what I’m doing wrong in my code?

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 40px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  text-align: center;
  color: #bababa;
  background-color: #ffffff;
  font-size: 11px;
  font-family: 'Nunito Sans', sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device=width, initial-scale=1, shrink-to-fit=no"">
  <title>Jenny Hua</title>
  <link rel="icon" type="image/png" href="img/icon.png"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="css/simplegrid.css" />
  <link href="css/sticky-footer.css" rel="stylesheet">
  <link href="css/narrow-jumbotron.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display|Roboto:300|Cedarville+Cursive" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
<body>
  <header>
     <div class="container navbar-container navbar-fixed-top" role="navigation">
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
          <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=""><img onload="this.style.opacity='1!important';" class= "logo" src="img/logo.png"></a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
           <li class="navbar-left"><a href="http://wwwl">TRAVEL</a></li>
           <li class="navbar-left active"><a href="http://www"> PORTFOLIO </a></li>
           <li class="navbar-left"><a href="http://www> INSPO </a></li>
           <li class="navbar-left"><a href="http://w> ABOUT </a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
      <li class="right"> <a href="https://www.instagram.com/"><i class="fa fa-instagram"></i></a>
      <li class="right"> <a href="https://www.pinterest.com/"><i class="fa fa-pinterest"></i></a>
      <li class="right"> <a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
      <li class="right"> <a href="https://twitter.com/"><i class="fa fa-twitter"></i></a>  
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </div>
</div>
  </header>
<!---End Header-->
<style>
      .content {
        background: #ffffff;
        font-family: 'Roboto', sans-serif;
        color: #4a4a4a;
        font-size:15px;
      }
</style>

 <!-- Page Content -->
    <div class="container">

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Page Heading
                    <small>Secondary Text</small>
                </h1>
            </div>
        </div>
        <!-- /.row -->

        <!-- Project One -->
        <div class="row">
            <div class="col-md-7">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x300" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>Project One</h3>
                <h4>Subheading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Project Two -->
        <div class="row">
            <div class="col-md-7">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x300" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>Project Two</h3>
                <h4>Subheading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Project Three -->
        <div class="row">
            <div class="col-md-7">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x300" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>Project Three</h3>
                <h4>Subheading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, temporibus, dolores, at, praesentium ut unde repudiandae voluptatum sit ab debitis suscipit fugiat natus velit excepturi amet commodi deleniti alias possimus!</p>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Project Four -->
        <div class="row">

            <div class="col-md-7">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x300" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>Project Four</h3>
                <h4>Subheading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quidem, consectetur, officia rem officiis illum aliquam perspiciatis aspernatur quod modi hic nemo qui soluta aut eius fugit quam in suscipit?</p>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        <!-- /.row -->

        <!-- /.row -->
  <!-- End page content -->
    <footer class="footer">
      <div class="container">
        <span style="text-align: center">Copyright &copy; 2017. J. All rights reserved.</span>
      </div>
    </footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Tags:

5

Answers


  1. 0

    You don’t have to place the container inside the footer,

    Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

    so you can place the container class in the footer tag

    /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 40px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  text-align: center;
  color: #bababa;
  background-color: #ffffff;
  font-size: 11px;
  font-family: 'Nunito Sans', sans-serif;
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device=width, initial-scale=1, shrink-to-fit=no"">
  <title>Jenny Hua</title>
  <link rel="icon" type="image/png" href="img/icon.png"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="css/simplegrid.css" />
  <link href="css/sticky-footer.css" rel="stylesheet">
  <link href="css/narrow-jumbotron.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display|Roboto:300|Cedarville+Cursive" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
<body>
  <header>
     <div class="container navbar-container navbar-fixed-top" role="navigation">
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
          <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=""><img onload="this.style.opacity='1!important';" class= "logo" src="img/logo.png"></a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
           <li class="navbar-left"><a href="http://wwwl">TRAVEL</a></li>
           <li class="navbar-left active"><a href="http://www"> PORTFOLIO </a></li>
           <li class="navbar-left"><a href="http://www> INSPO </a></li>
           <li class="navbar-left"><a href="http://w> ABOUT </a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
      <li class="right"> <a href="https://www.instagram.com/"><i class="fa fa-instagram"></i></a>
      <li class="right"> <a href="https://www.pinterest.com/"><i class="fa fa-pinterest"></i></a>
      <li class="right"> <a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
      <li class="right"> <a href="https://twitter.com/"><i class="fa fa-twitter"></i></a>  
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </div>
</div>
  </header>
<!---End Header-->
<style>
      .content {
        background: #ffffff;
        font-family: 'Roboto', sans-serif;
        color: #4a4a4a;
        font-size:15px;
      }
</style>

 <!-- Page Content -->
    <div class="container">

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Page Heading
                    <small>Secondary Text</small>
                </h1>
            </div>
        </div>
        <!-- /.row -->

        <!-- Project One -->
        <div class="row">
            <div class="col-md-7">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x300" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>Project One</h3>
                <h4>Subheading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Project Two -->
        <div class="row">
            <div class="col-md-7">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x300" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>Project Two</h3>
                <h4>Subheading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Project Three -->
        <div class="row">
            <div class="col-md-7">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x300" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>Project Three</h3>
                <h4>Subheading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, temporibus, dolores, at, praesentium ut unde repudiandae voluptatum sit ab debitis suscipit fugiat natus velit excepturi amet commodi deleniti alias possimus!</p>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Project Four -->
        <div class="row">

            <div class="col-md-7">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x300" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>Project Four</h3>
                <h4>Subheading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quidem, consectetur, officia rem officiis illum aliquam perspiciatis aspernatur quod modi hic nemo qui soluta aut eius fugit quam in suscipit?</p>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        <!-- /.row -->

        <!-- /.row -->
  <!-- End page content -->
    <footer class="footer container">
  
        <span style="text-align: center">Copyright &copy; 2017. J. All rights reserved.</span>
    
    </footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
    Login or Signup to reply.
  2. 0

    Remove position: absolute

    /* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 40px;
}
.footer {
  position: static; /* ======== Changed this code =======*/
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  text-align: center;
  color: #bababa;
  background-color: #ffffff;
  font-size: 11px;
  font-family: 'Nunito Sans', sans-serif;
}
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device=width, initial-scale=1, shrink-to-fit=no"">
  <title>Jenny Hua</title>
  <link rel="icon" type="image/png" href="img/icon.png"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <link rel="stylesheet" type="text/css" href="css/simplegrid.css" />
  <link href="css/sticky-footer.css" rel="stylesheet">
  <link href="css/narrow-jumbotron.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display|Roboto:300|Cedarville+Cursive" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </head>
<body>
  <header>
     <div class="container navbar-container navbar-fixed-top" role="navigation">
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
          <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=""><img onload="this.style.opacity='1!important';" class= "logo" src="img/logo.png"></a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
           <li class="navbar-left"><a href="http://wwwl">TRAVEL</a></li>
           <li class="navbar-left active"><a href="http://www"> PORTFOLIO </a></li>
           <li class="navbar-left"><a href="http://www> INSPO </a></li>
           <li class="navbar-left"><a href="http://w> ABOUT </a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
      <li class="right"> <a href="https://www.instagram.com/"><i class="fa fa-instagram"></i></a>
      <li class="right"> <a href="https://www.pinterest.com/"><i class="fa fa-pinterest"></i></a>
      <li class="right"> <a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
      <li class="right"> <a href="https://twitter.com/"><i class="fa fa-twitter"></i></a>  
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
  </div>
</div>
  </header>
<!---End Header-->
<style>
      .content {
        background: #ffffff;
        font-family: 'Roboto', sans-serif;
        color: #4a4a4a;
        font-size:15px;
      }
</style>

 <!-- Page Content -->
    <div class="container">

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">Page Heading
                    <small>Secondary Text</small>
                </h1>
            </div>
        </div>
        <!-- /.row -->

        <!-- Project One -->
        <div class="row">
            <div class="col-md-7">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x300" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>Project One</h3>
                <h4>Subheading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Project Two -->
        <div class="row">
            <div class="col-md-7">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x300" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>Project Two</h3>
                <h4>Subheading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Project Three -->
        <div class="row">
            <div class="col-md-7">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x300" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>Project Three</h3>
                <h4>Subheading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, temporibus, dolores, at, praesentium ut unde repudiandae voluptatum sit ab debitis suscipit fugiat natus velit excepturi amet commodi deleniti alias possimus!</p>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        <!-- /.row -->

        <hr>

        <!-- Project Four -->
        <div class="row">

            <div class="col-md-7">
                <a href="#">
                    <img class="img-responsive" src="http://placehold.it/700x300" alt="">
                </a>
            </div>
            <div class="col-md-5">
                <h3>Project Four</h3>
                <h4>Subheading</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quidem, consectetur, officia rem officiis illum aliquam perspiciatis aspernatur quod modi hic nemo qui soluta aut eius fugit quam in suscipit?</p>
                <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
        <!-- /.row -->

        <!-- /.row -->
  <!-- End page content -->
    <footer class="footer">
      <div class="container">
        <span style="text-align: center">Copyright &copy; 2017. J. All rights reserved.</span>
      </div>
    </footer>
<!---End Footer-->
<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
    Login or Signup to reply.
  3. 0

    Add right:0; left:0; in to the footer style

    .footer {
    right: 0;
    left: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #bababa;
    background-color: #ffffff;
    font-size: 11px;
    font-family: 'Nunito Sans', sans-serif;
}
    Login or Signup to reply.
  4. 0

    Use this code because I found some error on your code and on your code first container is not closed.
    So follow this structure:

              <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="utf-8"/>
          <meta name="viewport" content="width=device=width, initial-scale=1, shrink-to-fit=no">
          <title>Jenny Hua</title>
          <link rel="icon" type="image/png" href="img/icon.png"/>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
          <link rel="stylesheet" type="text/css" href="css/style.css" />
          <link rel="stylesheet" type="text/css" href="css/simplegrid.css" />
          <link href="css/sticky-footer.css" rel="stylesheet">
          <link href="css/narrow-jumbotron.css" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css?family=Nunito|Nunito+Sans|Playfair+Display|Roboto:300|Cedarville+Cursive" rel="stylesheet">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
          <!-- Latest compiled and minified CSS -->
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
          <!-- Latest compiled and minified JavaScript -->
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
          </head>
          <body>
          <header>
            <div class="container navbar-container navbar-fixed-top" role="navigation">
              <div class="navbar navbar-default">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> <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=""><img onload="this.style.opacity='1!important';" class= "logo" src="img/logo.png"></a> </div>
                  <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                      <li class="navbar-left"><a href="http://wwwl">TRAVEL</a></li>
                      <li class="navbar-left active"><a href="http://www"> PORTFOLIO </a></li>
                      <li class="navbar-left">
                      <a href="http://www"> INSPO </a></li>
                     <li class="navbar-left"><a href="http://w"> ABOUT </a></li>
                  </ul>
                  <ul class="nav navbar-nav navbar-right">
                      <li class="right"> <a href="https://www.instagram.com/"><i class="fa fa-instagram"></i></a>
                      <li class="right"> <a href="https://www.pinterest.com/"><i class="fa fa-pinterest"></i></a>
                      <li class="right"> <a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
                      <li class="right"> <a href="https://twitter.com/"><i class="fa fa-twitter"></i></a>
                    </ul>
                  </div>
                  <!--/.nav-collapse --> 
                </div>
                <!--/.container-fluid --> 
              </div>
            </div>
          </header>
          <!---End Header-->
          <style>
                .content {
                  background: #ffffff;
                  font-family: 'Roboto', sans-serif;
                  color: #4a4a4a;
                  font-size:15px;
                }
          </style>

          <!-- Page Content -->
          <div class="container">

          <!-- Page Heading -->
          <div class="row">
            <div class="col-lg-12">
              <h1 class="page-header">Page Heading <small>Secondary Text</small> </h1>
            </div>
          </div>
          <!-- /.row --> 

          <!-- Project One -->
          <div class="row">
            <div class="col-md-7"> <a href="#"> <img class="img-responsive" src="http://placehold.it/700x300" alt=""> </a> </div>
            <div class="col-md-5">
              <h3>Project One</h3>
              <h4>Subheading</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
              <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </div>
          </div>
          <!-- /.row -->

          <hr>

          <!-- Project Two -->
          <div class="row">
            <div class="col-md-7"> <a href="#"> <img class="img-responsive" src="http://placehold.it/700x300" alt=""> </a> </div>
            <div class="col-md-5">
              <h3>Project Two</h3>
              <h4>Subheading</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
              <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </div>
          </div>
          <!-- /.row -->

          <hr>

          <!-- Project Three -->
          <div class="row">
            <div class="col-md-7"> <a href="#"> <img class="img-responsive" src="http://placehold.it/700x300" alt=""> </a> </div>
            <div class="col-md-5">
              <h3>Project Three</h3>
              <h4>Subheading</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, temporibus, dolores, at, praesentium ut unde repudiandae voluptatum sit ab debitis suscipit fugiat natus velit excepturi amet commodi deleniti alias possimus!</p>
              <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </div>
          </div>
          <!-- /.row -->

          <hr>

          <!-- Project Four -->
          <div class="row">
            <div class="col-md-7"> <a href="#"> <img class="img-responsive" src="http://placehold.it/700x300" alt=""> </a> </div>
            <div class="col-md-5">
              <h3>Project Four</h3>
              <h4>Subheading</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quidem, consectetur, officia rem officiis illum aliquam perspiciatis aspernatur quod modi hic nemo qui soluta aut eius fugit quam in suscipit?</p>
              <a class="btn btn-primary" href="#">View Project <span class="glyphicon glyphicon-chevron-right"></span></a> </div>
          </div>
          <!-- /.row --> 

          <!-- /.row --> 
          <!-- End page content -->
          </div>
          <footer class="footer">
            <div class="container"> <span style="text-align: center">Copyright &copy; 2017. J. All rights reserved.</span> </div>
          </footer>
          <!---End Footer--> 
          <!-- Bootstrap core JavaScript
              ================================================== --> 
          <!-- Placed at the end of the document so the pages load faster --> 
          <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
          <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
          </body>
          </html>
    Login or Signup to reply.
  5. 0

    The problem is that you are not setting left for the footer. Set left:0;. Edit this for your footer:

    .footer{
  position:absolute;
  bottom:0;
  left:0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search