"Mobile Responsive Bootstrap According for daily News!"
Bootstrap 3.3.0 Snippet by mr-curious

Post to Facebook Tweet this

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
<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="center"><h1 style='margin-top: 20px; '> News Deck! </h1></div>
<hr style="border-width: 2px 2px 0; border-style: solid; border-color: palevioletred; width: 100%; margin-left: auto; margin-right: auto;"/>
<section id="news"><br>
<div class="container-fluid">
<div class="row">
<div class=" col-sm-1"></div>
<div class="col-md-8 col-sm-8 col-lg-8 col-sm-offset-1">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse10">
News Title. <i class="more-less glyphicon glyphicon-plus"></i></a>
</h4>
</div>
<div id="collapse10" class="panel-collapse collapse">
<div class="panel-body">
<p>News Paragraph</p></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse9">News Title. <i class="more-less glyphicon glyphicon-plus"></i></a>
</h4>
</div>
<div id="collapse9" class="panel-collapse collapse">
<div class="panel-body">
<p>News Paragraph</p></div>
</div>
</div>
<div class="panel panel-default">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
<style>.drop-shadow{-webkit-box-shadow:0 0 5px 2px rgba(0,0,0,.25);box-shadow:0 0 5px 2px rgba(0,0,0,.25)}.source{color:#000}.NewRed{color:red;font-size:12px}.more-less{float:right;color:#eb749f}body{overflow-x:hidden}.btn{background-color:#eb749f;color:white;border-radius:12px;}
.btn:hover{background-color:#777;color:white;box-shadow:0 0 20px rgba(0, 0, 0, 0.20);}
.panel{transition:all 200ms ease-out;}
.panel:hover{box-shadow:0 0 20px rgba(0, 0, 0, 0.40);} h1{color:#eb749f;font-weight:300;} a{color:#eb749f;-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms;}</style>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
<script>function toggleIcon(e){$(e.target).prev('.panel-heading').find(".more-less").toggleClass('glyphicon-plus glyphicon-minus');} $('.panel-group').on('hidden.bs.collapse',toggleIcon);$('.panel-group').on('shown.bs.collapse',toggleIcon);</script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Fresh Bootstrap Table
Carousel Featured News Boostrap 4
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)

Questions / Comments: