html - Adding borders with border title in materialize -
i trying add section seperator using border shown in image. how appreciable. dont know there materialized component available same or not?
myfiddle : https://jsfiddle.net/fcvr8oxq/
image demo : 
<body> <main> <link href="https://fonts.googleapis.com/icon?family=material+icons" rel="stylesheet"> <nav> <div class="nav-wrapper light-blue lighten-1"> <ul id="nav-mobile" class="full side-nav"> <li><a href="#">john daglas</a> <ul class="collection"> <li class="collection-item avatar"> <img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle"> <span class="title">title</span> <p>first line <br> second line </p> </li> </ul> </li> <li><a href="#">follower analysis</a></li> <li><a href="#">tweet analysis</a></li> <li><a href="#">retweet analysis</a></li> <li><a href="#">tweet analysis</a></li> </ul> <!-- include line below --> <a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a> <!-- end --> </div> </nav> <div class="row scrollspy grey lighten-4"> <div class="container"> <div class="row"> <div class="col s2 m2"> <div class="card-panel green accent-4"> <span class="white-text">tweets </span> </div> </div> <div class="col s2 m2 "> <div class="card-panel deep-orange accent-2"> <i class="material-icons">repeat</i> <span class="white-text">retweet </span> </div> </div> <div class="col s2 m2"> <div class="card-panel green accent-4"> <span class="white-text"> favourite </span> </div> </div> <div class="col s2 m2 "> <div class="card-panel deep-orange accent-2"> <span class="white-text"> followers </span> </div> </div> <div class="col s2 m2"> <div class="card-panel green accent-4"> <span class="white-text"> sentiment </span> </div> </div> <div class="col s2 m2 "> <div class="card-panel deep-orange accent-2"> <span class="white-text"> social score </span> </div> </div> </div> <div class="row"> <div class="col s6 m6"> <div class="card-panel teal"> <span class="white-text">sentiment analysis graph tweets </span> </div> </div> <div class="col s6 m6"> <div class="card-panel light-blue accent-4"> <span class="white-text">sentiment analysis donuts graph hastags </span> </div> </div> </div> <div class="row"> <div class="col s12 m12"> <div class="card-panel teal"> <span class="white-text">tags analysis. </span> </div> </div> </div> </div> </div> </main> <footer class="page-footer"> <div class="footer-copyright"> <div class="container">© 2014 copyright text <a class="grey-text text-lighten-4 right" href="#!">more links</a> </div> </div> </footer> </body>
please try one:
.row { border:5px solid #42a5f5; margin-top:10px; } you can use following html:
<div> <h1><span>div title</span></h1> </div> with following css:
div{ border: 1px solid #000; width: 200px; height: 200px; } div h1{ text-align: center; margin-top: -10px; height: 20px; line-height: 20px; font-size: 15px; } div h1 span{ background-color: white; } 
Comments
Post a Comment