Luka Luka - 5 months ago 29
CSS Question

Bootstrap HTML5 Title with border and small text like fieldset but no fieldset/legend

I am building bootstrap based web and I am trying to make title inside of a frame with text attached in the middle of bottom border and still be responsive. Small text on small devices can go in multiple rows, or even go inside the box.

All I could do is
this.
And I want to do it like this.

I hope someone already done this and/or could help me doing it.

Thanks in advance.

One big detail is it should be completely transparent so it can go over a backround picture.

And it is much differend than fieldset because the "legend" is on bottom.

Answer

Update:

See fiddle

CSS:

.navbar-brand {
  margin: 0;
  color: #ffffff;
  text-align: center;
  position: relative;
  display: inline-block;
  border-top: 8px solid #ffffff;
  padding: 5px 32px 0px 32px;
  line-height: 1.08333333;
  height: auto;
}
.navbar-brand:before {
  position: absolute;
  content: '';
  left: -8px;
  top: -8px;
  width: 8px;
  bottom: 12px;
  background: #ffffff;
}
.navbar-brand:after {
  position: absolute;
  content: '';
  right: -8px;
  top: -8px;
  width: 8px;
  bottom: 12px;
  background: #ffffff;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
  color: #ffffff;
  text-decoration: none;
}
.navbar-header + h3 {
  margin-top: 61px;
}
.navbar-header {
  text-align: center;
}
.small-lines:before {
  position: absolute;
  content: '';
  left: -40px;
  height: 8px;
  bottom: 12px;
  width: 8%;
  background: #ffffff;
}
.small-lines:after {
  position: absolute;
  content: '';
  right: -40px;
  height: 8px;
  bottom: 12px;
  width: 8%;
  background: #ffffff;
}
.small-lines1:before {
  width: 38%;
  background: #009fb6;
}
.small-lines1:after {
  width: 38%;
  background: #009fb6;
}
.navbar-brand a{
    font-size: 48px;
}
.container{
    margin-top: 150px;
}

small {
    line-height: 1.2;
    font-size: 24px;
    letter-spacing: 4.8px;
    display: block;
    position: relative;
}

HTML:

    <body style="background: black">
    <header class="">  
        <div class="container text-center">
            <div class="navbar-header">
                <h1 class="navbar-brand ">
                    <a href="./">BIG TITLE ONE<br>
                        <small class="small-lines">Here comes small text</small>
                    </a>
                </h1>
            </div>
        </div>
    </header>
    </body>
Comments