Ajuda na programação, respostas a perguntas / Css / Bootstrap HTML5 Title com borda e texto pequeno como fieldset mas sem fieldset / legend - css, html5, bootstrap do twitter, painel, fieldset

Bootstrap HTML5 Title com borda e texto pequeno como fieldset mas sem fieldset / legend - css, html5, twitter-bootstrap, painel, fieldset

Eu estou construindo web com base em bootstrap e estou tentandopara criar título dentro de um quadro com texto anexado no meio da borda inferior e ainda ser responsivo. Texto pequeno em dispositivos pequenos pode ir em várias linhas, ou até mesmo ir dentro da caixa.

Tudo que eu pude fazer é
.
E eu quero fazer como .

Espero que alguém já tenha feito isso e / ou possa me ajudar a fazer isso.

Desde já, obrigado.

Um grande detalhe é que deve ser completamente transparente para que possa passar por cima de uma imagem de fundo.

E é muito diferente do fieldset porque a "legenda" está no fundo.

Respostas:

1 para resposta № 1

Atualizar:

Ver violino

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>