Footer layout of Bootstrap (December May 28, 2015), bootstrapfooter

Footer layout of Bootstrap (December May 28, 2015), bootstrapfooter

Code at the end of the page:

<! -- Use container-fluid to make the width of the end of the entire page 100%, and set its background color -->
<Footer class = "container-fluid foot-wrap">
<! -- Use container to center the content at the end of the page -->
<Div class = "container">
<Div class = "row">
<Div class = "row-content col-lg-2 col-sm-4 col-xs-6">
<H3> Subscribe <Ul>
<Li> <a href = "#"> Newsletter </a> </li>
<Li> <a href = "#"> RSS feed </a> </li>
<Li> <a href = "#"> RSS to Email </a> </li>
<Li> <a href = "#"> Product Hunt </a> </li>
<Li> <a href = "#"> Twitter </a> </li>
<Li> <a href = "#"> Facebook </a> </li>
<Li> <a href = "#"> Pinterest </a> </li>
<Li> <a href = "#"> Google + </a> </li>
</Ul>
</Div>
<Div class = "row-content col-lg-2 col-sm-4 col-xs-6">
<H3> BROWSE <Ul>
<Li> <a href = "#"> Home </a> </li>
<Li> <a href = "#"> Gallery </a> </li>
<Li> <a href = "#"> Templates </a> </li>
<Li> <a href = "#"> Resources </a> </li>
<Li> <a href = "#"> OPL Themes </a> </li>
</Ul>
</Div>
<Div class = "row-content col-lg-2 col-sm-4 col-xs-6">
<H3> INFORMATION <Ul>
<Li> <a href = "#"> About </a> </li>
<Li> <a href = "#"> Why One Page? </A> </li>
<Li> <a href = "#"> OPL Blog </a> </li>
<Li> <a href = "#"> Product Hunt </a> </li>
<Li> <a href = "#"> Advertise </a> </li>
<Li> <a href = "#"> Submit </a> </li>
<Li> <a href = "#"> Award Ribbons </a> </li>
<Li> <a href = "#"> Roadmap </a> </li>
</Ul>
</Div>

<Div class = "row-content col-lg-2 col-sm-4 col-xs-6">
<H3> RESOURCES <Ul>
<Li> <a href = "#"> Browse All </a> </li>
<Li> <a href = "#"> Design </a> </li>
<Li> <a href = "#"> Development </a> </li>
<Li> <a href = "#"> Hosting </a> </li>
<Li> <a href = "#"> Round Ups </a> </li>
<Li> <a href = "#"> Tutorials </a> </li>
</Ul>

</Div>
<Div class = "row-content col-lg-2 col-sm-4 col-xs-6">
<H3> TRENDING <Ul>
<Li> <a href = "#"> Big Typography </a> </li>
<Li> <a href = "#"> Free Templates </a> </li>
<Li> <a href = "#"> Most Loved </a> </li>
<Li> <a href = "#"> Centrally Divided </a> </li>
<Li> <a href = "#"> Skrollr. js </a> </li>
<Li> <a href = "#"> Parallax Scrolling </a> </li>
<Li> <a href = "#"> Off-Canvas Menu </a> </li>
<Li> <a href = "#"> Molecules </a> </li>
</Ul>
</Div>
<Div class = "row-content col-lg-2 col-sm-4 col-xs-6">
<H3> opl themes <Ul>
<Li> <a href = "#"> Browse All </a> </li>
<Li> <a href = "#"> East Java </a> </li>
<Li> <a href = "#"> Clutterless </a> </li>
<Li> <a href = "#"> Mapped </a> </li>
</Ul>
</Div>

</Div> <! --/. Row -->
</Div> <! --/. Container -->

<! -- Social icon list, where the icon uses the Font Awesome icon library -->
<Ul class = "social">
<Li>
<A href = "#" title = "Twitter Profile">
<Span class = "icon fa-twitter"> </span>
</A>
</Li>
<Li>
<A href = "#" title = "Facebook Page">
<Span class = "icon fa-facebook"> </span>
</A>
</Li>
<Li>
<A href = "#" title = "LinkedIn Profile">
<Span class = "icon fa-linkedin"> </span>
</A>
</Li>
<Li>
<A href = "#" title = "Goole + Profile">
<Span class = "icon fa-google"> </span>
</A>
</Li>
<Li>
<A href = "#" title = "Github Profile">
<Span class = "icon fa-github"> </span>
</A>
</Li>
</Ul>
<P align = "center">

Some styles are written in less mode.

.foot-wrap{

background-color: #373f48;

margin-top:80px;

}

 .row-content{

 >h3{

color:#DDD;

font-size:16px;

font-weight: 300;

line-height: 16px;

margin:40px 0 30px 34px;

     }

>ul{

font-size:13px;

line-height:24px;

>li{

list-style:none;

>a{

color:#878B91;

&:hover{

text-decoration:none;

color:#c1ba62;

}

}

}

}

 } 

 ul.social{

margin:0;

padding:0;

width:100%;

text-align:center;

> li{

display:inline-block;

> a{

display:inline-block;

font-size:18px;

line-height:30px;

.square(30px);

border-radius:36px;

background-color:@gray-light;

color:#fff;

margin:0 3px 3px 0;

&:hover{

text-decoration:none;

background-color:@link-hover-color;

}

}

}

}

The final result is as follows:

Big screen display:

Screen Display:

Small screen display:

Note: because the source file style of bootstrap has been directly modified, it is normal to copy the above Code without achieving the effect.