Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Creating horizontal ruler with heading using bootstrap css

Creating horizontal ruler with heading using bootstrap css

Problem

I am trying to create HR with heading and label. It should look like:

Codepan: CODEPEN DEMO

I am not good with css, I appreciate if someone can tell what components of bootstrap should I use. Or change in css

html:

Top pics Popular Friend analysis


Article changes everyday, come back for more

IT should look like this

Problem courtesy of: user3121782

Solution

I looked at your screenshot and created the HTML using Bootstrap 3 and CSS. Please look at Demo.

HTML:

CSS:

body {
  font-size: 130%;
  color: gray;
}
hr {
    margin-top: 1%;
}
.menu > ul {
  display: block;
  list-style: none;
}
.menu > ul > li {
  display: inline;
  padding-right: 10%;
}
.menu > ul > li:first-child {
  color: red;
}
.menu > ul > li:last-child {
  padding-right: 0;
}
.menu > ul > li > span {
  color: black;
  font-size: 80%;
  text-transform: uppercase;
  vertical-align: super;
  padding: 1%;
}
.custom-alert {
  padding-left: 7%;
  color: red;
}
Solution courtesy of: negative0

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Creating horizontal ruler with heading using bootstrap css

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×