I'm trying to make footer that consist of 2 anchor text and I want to make both of those anchor text placed side by side (not vertically).
Here's my HTML:
<footer>
<div class="container">
<div class="row">
<div class="col-md-6">
<a href='#'>BRAND</a>
</div>
<div class="col-md-2">
<a href='#'>Social 1</a>
</div>
<div class="col-md-2">
<a href='#'>Social 2</a>
</div>
<div class="col-md-2">
<a href='#'>Social 3</a>
</div>
</div>
</div>
</footer>
And here's the CSS:
footer {
bottom: 0;
width: 100%;
height: 50px;
text-align: center;
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 10%);
}
Here's my Jsfiddle Can you help me figure it out what's wrong? Thank you
I don't see any issues with it after fixing the bootstrap link. Are you sure you have viewed the outcome in the browser window wide enough - so you are not rendering a smaller than medium (md) view?
You have the right idea to add col-md-2
to each link. Make sure you have the bootstrap CSS loaded on the page.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Make sure you're viewing the page on md
(or larger) screen size. Alternatively, use col-sm-*
or col-xs-*
styles. Following sizes are used:
xs: Extra small devices (phones, less than 768px)
md: Small devices (tablets, 768px and up)
sm: Medium devices (desktops, 992px and up)
lg: Large devices (large desktops, 1200px and up)
An improvement would be to use col-md-offset-2 col-md-2
on the first link, instead of col-md-6
.
footer { bottom: 0; width: 100%; height: 50px; text-align: center; background: -webkit-linear-gradient(top, rgba(125, 126, 125, 1) 0%, rgba(14, 14, 14, 1) 10%); }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <!-- Shows this working with `col-xs-*` (to make it viewable on small code snippet screen). --> <footer> <div class="container"> <div class="row"> <div class="col-xs-offset-2 col-xs-2"> <a href='#'>BRAND</a> </div> <div class="col-xs-2"> <a href='#'>Social 1</a> </div> <div class="col-xs-2"> <a href='#'>Social 2</a> </div> <div class="col-xs-2"> <a href='#'>Social 3</a> </div> </div> </div> </footer>
https://jsfiddle.net/32gund40/6/
Updated fiddle you weren't including the bootstrap stylesheet
Adjust the col-md-6
classes to col-xs-6
if you need it the same col width on mobile
use
<div class="clear:both"></div>
just before the closing tag of row div and distribute the tags like I did.
<footer>
<div class="container">
<div class="row">
<div class="col-md-6">
<a href='#'>BRAND</a>
</div>
*<div class="col-md-6">*
<div class="col-md-2">
<a href='#'>Social 1</a>
</div>
<div class="col-md-2">
<a href='#'>Social 2</a>
</div>
<div class="col-md-2">
<a href='#'>Social 3</a>
</div>
*</div>*
**<div class="clear:both"></div>**
</div>
</div>
</footer>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.