Bootstrap Snippet vartical heading using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="area-title">
        <h1 data-after-text="News" class="vertival-heading"></h1>
        <h4>Latest</h4>
        <h2>Blog</h2>
      </div>
      <div class="hidding-content">
        <p>Wasn't a dream. His room, a proper human room although a little too small, lay Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae neque maiores, molestiae fugit incidunt consequuntur <span class="heading-text">voluptatem soluta minus enim est. Similique veniam quidem velit rem nulla tenetur, eum optio dicta.</span> </p>
      </div>
    </div>
  </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i');
.vertival-heading[data-after-text]:after {
    content: attr(data-after-text)"";
    z-index: -1;
    text-align: left;
    position: absolute;
    color: rgb(238, 238, 238);
    text-transform: uppercase;
    font-size: 80px;
    transform: rotate(270deg);
    top: 100px;
    line-height: 1.554;
    left: -90px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    z-index: 9;
}
.area-title {
    display: inline-block;
    margin-bottom: 40px;
}
.area-title h4 {
    font-size: 30px;
    margin-bottom: 15px;
    font-weight: 600;
}
.area-title h2 {
    color: #ffbd34;
    font-size: 50px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0;
    position: relative;
    text-transform: uppercase;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"vartical heading"
Bootstrap 3.3.0 Snippet by SANTANU CHOWDHURY

Related: See More

Questions / Comments:

"vartical heading" Bootstrap 3.3.0 Snippet by SANTANU CHOWDHURY

Related: See More

Questions / Comments:

"vartical heading"
Bootstrap 3.3.0 Snippet by SANTANU CHOWDHURY