Bootstrap Snippet Responsive Event using HTML CSS Bootstrap

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Fredoka+One' rel='stylesheet' type='text/css'>
<!-- Start your code here -->
<div class="panel panel-default event">
  <div class="panel-body">
    <div class="rsvp col-xs-2 col-sm-2">
      <i><img src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img></i>
    </div>
    <div class="info col-xs-8 col-sm-7">
      Event Title
      <div class="visible-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elitero..</div>
      <div class="hidden-xs">
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#location" aria-controls="location" role="tab" data-toggle="tab">Location</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
          </ul>
          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="location">Location</div>
            <div role="tabpanel" class="tab-pane" id="profile">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mattis feugiat sem, eu sagittis libero. Duis non odio ut nibh volutpat tempus eget interdum elit. 
            </div>
          </div>
        </div>
    </div>
    <div class="author col-xs-2 col-sm-3">
        <div class="profile-image">
            <img src="http://api.randomuser.me/portraits/med/men/71.jpg"/>
        </div>
        <div class="profile hidden-xs">
            <strong>Robert White</strong>
            <article>Event leader and founder of this group</article>
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
img {
    max-height: 110px;
    max-width: 110px;
}
.event .panel-body {
  background: #BBDEFB;
  border: 1px solid #448AFF;
  padding:0;
  margin:0;
  height:86px;
}
.event .panel-body > div {
  padding: 0 10px;
}
.event .panel-body .rsvp {
  border-left: none;
  padding: 0;
  text-align: center;
  position: relative;
  background: #64B5F6;
  color: white;
  height: 100%;
}
.event .rsvp > div {
  font-size: 12px;
  position: absolute;
  bottom: 0;
  background: #42A5F5;
  width: 100%;
}
.event .rsvp i {
  font-size: 2em;
  display: block;
  position:relative;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Responsive Event "
Bootstrap 3.1.0 Snippet by wuxincheng

Related: See More

Questions / Comments:

"Responsive Event " Bootstrap 3.1.0 Snippet by wuxincheng

Related: See More

Questions / Comments:

"Responsive Event "
Bootstrap 3.1.0 Snippet by wuxincheng