Place Text on Div Edge

Navigation
2

I wanted to put text on the border, as in the attached image. I'm using Bootstrap.

Mycurrentcodelookslikethis:

CSS:

.jumbotronmax{padding-top:30px;padding-bottom:30px;margin-bottom:30px;color:inherit;/*background-color:#ccc*/}.jumbotronmax.h1,.jumbotronmaxh1{color:inherit}.jumbotronmaxp{margin-bottom:15px;font-size:21px;font-weight:200}.jumbotronmax>hr{border-top-color:#d5d5d5}.container.jumbotronmax,.container-fluid.jumbotronmax{padding-right:15px;padding-left:15px;border-radius:6px;border-style:solid;border-color:#000;}.jumbotronmax.container{max-width:100%}@mediascreenand(min-width:768px){.jumbotronmax{padding-top:48px;padding-bottom:48px}.container.jumbotronmax,.container-fluid.jumbotronmax{padding-right:60px;padding-left:60px}.jumbotronmax.h1,.jumbotronmaxh1{font-size:63px}}

HTML:

<sectionid="osindel" class="topico">
    <div class="container">
        <div class="row">
            <div class="jumbotronmax">
                <h1>Teste</h1>
            </div>
        </div>
    </div>
</section>
    
asked by anonymous 15.06.2017 / 18:51

1 answer

5

CSS: 

.fieldset-border {
  border: 1px groove #ddd !important;
  padding: 0 1.4em 1.4em 1.4em !important;
  margin: 0 0 1.5em 0 !important;
  -webkit-box-shadow: 0px 0px 0px 0px #000;
  box-shadow: 0px 0px 0px 0px #000;
}

.fieldset-border .legend-border {
  font-size: 1.2em !important;
  text-align: left !important;
  width: auto;
  padding: 0 10px;
  border-bottom: none;
}
<fieldset class="fieldset-border">
  <legend class="legend-border">Teste</legend>
</fieldset>

Example: Example in jsfiddle

    
15.06.2017 / 19:34
Special characters (ï »¿) appear in front of the XML tag [duplicate] UpperCase Input does not work in document.getElementById