Question posted in 
I am trying to fix my footer. Here is my problem, I am planning to put Copyright on the left side and social media icons on the right side. Currently, they are showing in the two different lines. I was wondering is there anyway I can make them put into one same line?
Here is my code:
<!-- Footer -->
<footer>
<hr>
<div class="container text-center">
<div class="page-header text-center">
<h3>Subscribe for special offer <small>Enter your information</small></h3>
</div>
<form action="" class="form-inline" style="text-align: center;">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" required="required">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" required="required">
</div>
<div class="form-group">
<label for="phone_no">Phone Number (Type only the numbers)</label>
<input type="text" name="num" data-validation="number"
data-validation-allowing="negative,number" input name="color"
data-validation="number" datavalidation-ignore="$" required="required" class="form-control"
id="phone_no" placeholder="Phone Number" maxlength="10" pattern="d*">
<!--<input type="tel" id="phone_no" pattern="^d{3}-d{3}-d{4}$" required="required">-->
</div>
<button type="submit" class="btn btn-default">Subscribe</button>
<hr>
</form> <!--End form-->
<hr>
<div class="copyright" style="text-align: left;">
<p>© Copyright @ 2016</p>
</div>
<div class="social media" style="text-align: right;">
<ul class="list-inline">
<li><a href="http://www.facebook.com"><i class="fa fa-facebook-square fa-3x"></i></a></li>
<li><a href="http://www.twitter.com"><i class="fa fa-twitter-square fa-3x"></i></a></li>
<li><a href="http://www.instagram.com"><i class="fa fa-instagram fa-3x"></i></a></li>
</ul>
</div>
</div> <!--End Container-->
</footer>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script>
$(function() {
$('a.page-scroll').bind('click', function(e) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo') //add/remove for smooth scroll;
e.preventDefault();
});
});
</script>
<script src="https://use.fontawesome.com/5a33902e83.js"></script>
</body>
</html>
2
Answers
Try This
JSFiddle: https://jsfiddle.net/iamrico/ng6xrsq5/
Change width of facebook