Scribd
Upload
247 views

Assignment

The document provides instructions to create different layouts using Bootstrap, including a 9 block layout, a sidebar layout, and a news template layout. It includes CSS snippets and instructions on adding columns, rows, navigation bars and other common Bootstrap elements.

Uploaded by

Abhishek Kirve
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
247 views

Assignment

The document provides instructions to create different layouts using Bootstrap, including a 9 block layout, a sidebar layout, and a news template layout. It includes CSS snippets and instructions on adding columns, rows, navigation bars and other common Bootstrap elements.

Uploaded by

Abhishek Kirve
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 27

Assignment: 2

Bootstrap

Set A:
1. Create following Bootstrap Web Layout Design. There are 9 blocks of the region in the
arrangement. You can either place the images in them or the contents.

<ht
ml>

<head>css block

<link rel="stylesheet" href="css/bootstrap.min.css">

<style>

body {

text-align: center;

color: white;
background-color: #f0f0f0;

h1 {

margin-top: 40px;

.margin-top {

margin-top: 10px;

.block1 {

height: 300px;

background-color: #42a8c8;

border: 5px solid #f0f0f0;

.empty-block {

height: 150px;

.block2 {

height: 150px;

background-color: #5bbfb4;

border: 5px solid #f0f0f0;

.block-contain {

height: 620px;

.block3 {
height: 310px;

background-color: #5bbfb4;

border: 5px solid #f0f0f0;

.block4 {

height: 300px;

background-color: #42a8c8;

margin-top: 10px;

border: 5px solid #f0f0f0;

.block5 {

height: 300px;

background-color: #5bbfb4;

margin-top: 10px;

border: 5px solid #f0f0f0;

.block6 {

height: 620px;

background-color: #42a8c8;

border: 5px solid #f0f0f0;

.block7 {

height: 150px;

background-color: #5bbfb4;

border: 5px solid #f0f0f0;


}

.block8 {

height: 150px;

background-color: #42a8c8;

margin-top: 10px;

border: 5px solid #f0f0f0;

.block9 {

height: 300px;

background-color: #5bbfb4;

margin-top: 10px;

border: 5px solid #f0f0f0;

</style>

</head>

<body>

<script src="js/jquery-3.6.0.js"></script>

<script src="js/bootstrap.min.js"></script>

<div class="container">

<div class="row margin-top">

<div class="col-sm-4 block1">

<h1>block 1</h1>

</div>
<div class="col-sm-8">

<div class="row">

<div class="col-sm-12 hidden-xs empty-block">

</div>

</div>

<div class="row">

<div class="col-sm-12 block2">

<h1>block 2</h1>

</div>

</div>

</div>

</div>

<div class="row margin-top">

<div class="col-sm-12 block-contain">

<div class="row">

<div class="col-sm-12 col-md-6">

<div class="row">

<div class="col-sm-12 block3">

<h1>block 3</h1>

</div>

</div>

<div class="row">

<div class="col-sm-6 block4">

<h1>block 4</h1>

</div>
<div class="col-sm-6 block5">

<h1>block 5</h1>

</div>

</div>

</div>

<div class="col-sm-12 col-md-3 block6">

<h1>block 6</h1>

</div>

<div class="col-sm-12 col-md-3">

<div class="row">

<div class="col-sm-12 block7">

<h1>block 7</h1>

</div>

</div>

<div class="row">

<div class="col-sm-12 block8">

<h1>block 8</h1>

</div>

</div>

<div class="row">

<div class="col-sm-12 block9">

<h1>block 9</h1>

</div>

</div>

</div>
</div>

</div>

</div>

</div>

</body>

</html>

Set B
1. Create following layout using bootstrap

<html>

<head>simple side bar


<link rel="stylesheet" href="css/bootstrap.min.css">

<style>

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');

body {

overflow-x: hidden;

font-family: 'Roboto', sans-serif;

font-size: 16px;

/* Toggle Styles */

#viewport {

padding-left: 250px;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

#content {

width: 100%;

position: relative;

margin-right: 0;

}
/* Sidebar Styles */

#sidebar {

z-index: 1000;

position: fixed;

left: 250px;

width: 250px;

height: 100%;

margin-left: -250px;

overflow-y: auto;

background: #37474F;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

#sidebar header {

background-color: #263238;

font-size: 20px;

line-height: 52px;

text-align: center;

}
#sidebar header a {

color: #fff;

display: block;

text-decoration: none;

#sidebar header a:hover {

color: red;

#sidebar .nav{

#sidebar .nav a{

background: none;

border-bottom: 1px solid #455A64;

color: #CFD8DC;

font-size: 14px;

padding: 16px 24px;

#sidebar .nav a:hover{

background: none;

color: #ECEFF1;
}

#sidebar .nav a i{

margin-right: 16px;

</style>

</head>

<body>

<script src="js/jquery-3.6.0.js"></script>

<script src="js/bootstrap.min.js"></script>

<div id="viewport">

<!-- Sidebar -->

<div id="sidebar">

<header>

<a href="#">My App</a>

</header>

<ul class="nav">

<li>

<a href="#">

<i class="zmdi zmdi-view-dashboard"></i> Dashboard

</a>
</li>

<li>

<a href="#">

<i class="zmdi zmdi-link"></i> Shortcuts

</a>

</li>

<li>

<a href="#">

<i class="zmdi zmdi-widgets"></i> Overview

</a>

</li>

<li>

<a href="#">

<i class="zmdi zmdi-calendar"></i> Events

</a>

</li>

<li>

<a href="#">

<i class="zmdi zmdi-info-outline"></i> About

</a>

</li>

<li>

<a href="#">

<i class="zmdi zmdi-settings"></i> Services

</a>
</li>

<li>

<a href="#">

<i class="zmdi zmdi-comment-more"></i> Contact

</a>

</li>

</ul>

</div>

<!-- Content -->

<div id="content">

<nav class="navbar navbar-default">

<div class="container-fluid">

<ul class="nav navbar-nav navbar-right">

<li>

<a href="#"><i class="zmdi zmdi-notifications text-danger"></i>

</a>

</li>

<li><a href="#">Test User</a></li>

</ul>

</div>

</nav>

<div class="container-fluid">

<h1>Simple Sidebar</h1>

<p>

Make sure to keep all page content within the


<code>#content</code>.

</p>

</div>

</div>

</div>

</body>

</html>

2. Create following News Template Layout using Bootstrap. At the top bar, you can include a climate
gadget and helpful links like part login and information exchange. Like in all other free news site
formats, mega menu choices are p

<html>
3. <head>
4. <link rel="stylesheet" href="css/bootstrap.min.css">
5. <style>
6. @import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
7.
8.
9. body {
10. color: #5a5a5a;
11. font-family: 'Open Sans',Arial,sans-serif;
12. font-size: 15px;
13. }
14. h1,h2,h3,h4,h5{
15. font-family: 'Montserrat', sans-serif;
16. }
17. a, a:hover, .btn{outline:none!important;}
18. .btn-search{background: #FD3A13; border-color: #FD3A13; color: #fff; padding: 7px 10px}
19. .btn-search:hover{background: #ca1b1b; border-color: #ca1b1b}
20. section{padding: 30px 0; float: left; width: 100%}
21. .card{float: left; width:100%}
22. .navbar {border: medium none; float: left; margin-bottom: 0px; width: 100%; border-radius: 0}
23. .title-large {font-size: 20px; margin: 10px 0 5px; line-height: 27px; color: #141517;}
24. .title-small { color: #141517; font-size: 16px; font-weight: 400; line-height: 23px; margin: 6px 0 0;}
25. .title-x-small {font-size: 18px; margin: 0px;}
26. .title-large a, .title-small a, .title-x-small a{color: inherit}
27. .banner-sec{float: left; width: 100%; background: #EBEBEB}
28. .card-block{padding:0 10px 10px;}
29. .card-text{margin: 0}
30. .text-time{color: #ff0000; font-weight: 600;}
31. .banner-sec .card-img-overlay{padding: 0; top: 3px; left: 7px; height: 20%}
32.
33. header{float: left; width:100%}
34. .small-top{ border-bottom: 1px solid #2b2b2b;float: left; width: 100%; background: #000}
35. .small-top .social-icon{float: right;}
36. .small-top .social-icon a {border-left: 1px solid #2b2b2b; color: #ca1b1b; float: left; padding: 6px
13px;}
37. .small-top .social-icon a:last-child {border-right: 1px solid #2b2b2b;}
38. .small-top .social-icon a:hover {color:#FD3A13; text-decoration: none;}
39. .small-top .date-sec {font-size: 13px; font-weight: 600; float: left; margin-top: 4px; color: #898989}
40. .top-head{background: #141517; width: 100%; float: left; height: 100px;}
41. .top-head h1 {color: #fff; font-size: 36px; font-weight: 600; margin: 18px 0 0;}
42. .top-head small{float: left; width: 100%; font-size: 14px; color: #c0c0c0; margin-top: 5px; margin-
left: 5px;}
43. .top-head .admin-bar {text-align: right; margin-top: 22px;}
44. .top-head .admin-bar a {color: #fff; line-height: 49px; position: relative; padding:0 7px;}
45. .top-head .admin-bar a:hover{color: #ff0000}
46. .top-head .admin-bar a i{margin-right: 6px;}
47. .top-head .admin-bar .ping {background: #ff0000; border: 3px solid #141517; border-radius: 50%;
height: 14px; position: absolute; right: 3px; top: 13px; width: 14px; z-index: 1;}
48. .top-head .admin-bar img {float: right; height: 50px; width: 50px; margin-left: 18px;}
49. .top-nav{background: #fff; padding: 0; border-bottom: 1px solid #dbdbdb}
50. .top-nav .nav-link {padding-bottom: 0.7rem; padding-top: 0.7rem;}
51. .top-nav .navbar-nav .nav-item + .nav-item{margin-left:0}
52. .top-nav li a{color: #141517; text-transform: uppercase; font-size: 14px; font-weight: 700;
padding: 0 10px; border-bottom: 2px solid #fff}
53. .top-nav li a:hover, .top-nav li a:focus, .top-nav li.active a{color: #141517; border-bottom: 2px
solid #FD3A13 }
54. .top-nav .form-control{border-color: #fff}
55. .navbar-toggle{background: #fff;}
56. .navbar-toggle .icon-bar{background:#0A2E61; }
57. .navbar-brand{display: none;}
58.
59. .top-slider .carousel-indicators{bottom: 0}
60. .top-slider .carousel-indicators li{border:1px solid #000;}
61. .top-slider .carousel-indicators .active{background:#000;}
62.
63.
64. .side-bar .nav-tabs{border-bottom:none;}
65. .side-bar .nav-tabs .nav-link {color: #aeaeae; text-transform: uppercase; border: none;}
66. .side-bar .nav-tabs .nav-link.active, .side-bar .nav-tabs .nav-link:hover{border-bottom:2px solid
#ff0000; text-transform: uppercase; color: #222}
67. .sidebar-tabing .media{margin-top: 20px}
68. .sidebar-tabing img{width: 120px;height: 100px;}
69. .sidebar-tabing .title-small {line-height: 23px; margin-top: 5px; font-size: 18px}
70.
71. #search {float: right; margin-top: 9px; width: 250px;}
72. .search {padding: 5px 0; width: 230px; height: 30px; position: relative; left: 10px; float: left; line-
height: 22px;}
73. .search input {background: #d0d0d0; border: medium none; border-radius: 3px 0 0 3px; float: left;
height: 36px; line-height: 18px; margin-left: 210px; padding: 0 9px; position: absolute; top: -3px;
width: 0; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out;
74. -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out;}
75. .search:hover input, .search input:focus { width: 200px; margin-left: 0px; background: #d0d0d0;}
76. .top-nav .btn {position: absolute;right: 0;top: -3px;border-radius:3px;}
77.
78. .banner-sec{float: left; width:100%;}
79. .banner-sec .news-block{margin-bottom: 20px}
80. .banner-sec .news-block:last-child{margin-bottom: 0px}
81. .banner-sec .news-des {margin-bottom: 5px;}
82. .banner-sec .title-large{margin: 18px 0 0}
83. .banner-sec .time{margin-top: 0px; font-size: 13px;}
84. .banner-sec .carousel-control.left, .banner-sec .carousel-control.right{background: none;}
85. .banner-sec .card{margin-bottom:20px;}
86.
87. .section-01{float: left; width: 100%; border-top: 1px solid #d5d5d5; border-bottom: 1px solid
#d5d5d5}
88. .section-01 .heading-large {border-bottom: 2px solid #222; color: #222; float: left; width: 100%;
padding:0 0 6px; margin:0 0 18px; text-align: left;}
89. .section-01 .heading-large::before, .section-01 .heading-large::after{background: transparent;}
90. .section-01 .heading-small {border-bottom: 2px solid #222; color: #222; float: left; margin: 7px 0 0;
width: 100%; padding-bottom: 10px; font-size: 18px }
91. .section-01 .title-small {margin-bottom: 5px; font-size:17px }
92. .section-01 .news-block{border-bottom: 1px dashed #000; padding-bottom: 30px; border: none;}
93. .section-01 aside > .news-block{border-bottom: 1px dashed #000; padding-bottom: 19px;}
94. .section-01 aside > .news-block:last-child{border-bottom: none; margin-bottom: 20px}
95. .section-01 .card{border: none;}
96. .section-01 .card-block{padding: 10px 0;}
97. .section-01 .video-sec {float: left; margin-top: 30px; width: 100%;}
98. .section-01 .video-block {float: left; margin-top: 20px; width: 100%;}
99.
100. .action-sec{width:100%; float:left; background:#222}
101. .action-box{float:left; width:100%; text-align:center;}
102. .action-box h2{color:#fff; font-size:20px;}
103.
104. </style>
105. </head>
106. <body>
107. <script src="js/jquery-3.6.0.js"></script>
108.
109. <script src="js/bootstrap.min.js"></script>
110. <div class="small-top">
111. <div class="container">
112. <div class="row">
113. <div class="col-lg-4 date-sec">
114. <div id="Date"></div>
115. </div>
116. <div class="col-lg-3 offset-lg-5">
117. <div class="social-icon"> <a target="_blank" href="#" class=" fa fa-facebook"></a> <a
target="_blank" href="#" class=" fa fa-twitter"></a> <a target="_blank" href="#" class=" fa fa-
google-plus"></a> <a target="_blank" href="#" class=" fa fa-linkedin"></a> <a target="_blank"
href="#" class=" fa fa-youtube"></a> <a target="_blank" href="#" class=" fa fa-vimeo-
square"></a> </div>
118. </div>
119. </div>
120. </div>
121. </div>
122. <div class="top-head left">
123. <div class="container">
124. <div class="row">
125. <div class="col-md-6 col-lg-4">
126. <h1>Grafreez News<small>Get the latest News</small></h1>
127. </div>
128. <div class="col-md-6 col-lg-3 ml-auto admin-bar hidden-sm-down">
129. <nav class="nav nav-inline"> <a href="#" class="nav-link"><span
class="ping"></span><i class="fa fa-envelope-o"></i></a> <a href="#" class="nav-link"><i
class="fa fa-bell-o"></i></a> <a href="#" class="nav-link">Bruce Wayne <img class="img-fluid
rounded-circle" src="http://grafreez.com/wp-content/temp_demos/river/img/admin-
bg.jpg"></a> </nav>
130. </div>
131. </div>
132. </div>
133. </div>
134. </header>
135. <section class="top-nav">
136. <nav class="navbar navbar-expand-lg py-0">
137. <div class="container">
138. <button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
139. <span class="navbar-toggler-icon"></span>
140. </button>
141. <div class="collapse navbar-collapse" id="exCollapsingNavbar2">
142. <ul class="nav navbar-nav ">
143. <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-
only">(current)</span></a> </li>
144. <li class="nav-item"> <a class="nav-link" href="#">World</a> </li>
145. <li class="nav-item"> <a class="nav-link" href="#">Politics</a> </li>
146. <li class="nav-item"> <a class="nav-link" href="#">Business</a> </li>
147. <li class="nav-item"> <a class="nav-link" href="#">Science</a> </li>
148. <li class="nav-item"> <a class="nav-link" href="#">Sports</a> </li>
149. <li class="nav-item"> <a class="nav-link" href="#">Tech</a> </li>
150. <li class="nav-item"> <a class="nav-link" href="#">Travel</a> </li>
151. <li class="nav-item"> <a class="nav-link" href="#">Health</a> </li>
152. </ul>
153. <form class="ml-auto">
154. <div class="search">
155. <input type="text" class="form-control" maxlength="64" placeholder="Search" />
156. <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
157. </div>
158. </form>
159. </div>
160. </div>
161. </nav>
162. </section>
163. <section class="banner-sec">
164. <div class="container">
165. <div class="row">
166. <div class="col-md-3">
167. <div class="card"> <img class="img-fluid"
src="http://grafreez.com/wp-content/temp_demos/river/img/politics.jpg" alt="">
168. <div class="card-img-overlay"> <span class="badge badge-pill badge-
danger">News</span> </div>
169. <div class="card-body">
170. <div class="news-title">
171. <h2 class=" title-small"><a href="#">Syria war: Why the battle for Aleppo
matters</a></h2>
172. </div>
173. <p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
174. </div>
175. </div>
176. <div class="card"> <img class="img-fluid"
src="http://grafreez.com/wp-content/temp_demos/river/img/travel.jpg" alt="">
177. <div class="card-img-overlay"> <span class="badge badge-pill badge-
danger">Politics</span> </div>
178. <div class="card-body">
179. <div class="news-title">
180. <h2 class=" title-small"><a href="#">Key Republicans sign letter warning
against</a></h2>
181. </div>
182. <p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
183. </div>
184. </div>
185. </div>
186. <div class="col-md-3">
187. <div class="card"> <img class="img-fluid"
src="http://grafreez.com/wp-content/temp_demos/river/img/business1.jpg" alt="">
188. <div class="card-img-overlay"> <span class="badge badge-pill badge-
danger">Travel</span> </div>
189. <div class="card-body">
190. <div class="news-title">
191. <h2 class=" title-small"><a href="#">Obamacare Appears to Be Making People
Healthier</a></h2>
192. </div>
193. <p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
194. </div>
195. </div>
196. <div class="card"> <img class="img-fluid"
src="http://grafreez.com/wp-content/temp_demos/river/img/food.jpg" alt="">
197. <div class="card-img-overlay"> <span class="badge badge-pill badge-
danger">News</span> </div>
198. <div class="card-body">
199. <div class="news-title">
200. <h2 class=" title-small"><a href="#">‘S.N.L.’ to Lose Two Longtime Cast
Members</a></h2>
201. </div>
202. <p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
203. </div>
204. </div>
205. </div>
206. <div class="col-md-6 top-slider">
207. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
208. <!-- Indicators -->
209. <ol class="carousel-indicators">
210. <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
211. <li data-target="#carousel-example-generic" data-slide-to="1"></li>
212. <li data-target="#carousel-example-generic" data-slide-to="2"></li>
213. </ol>
214.
215. <!-- Wrapper for slides -->
216. <div class="carousel-inner" role="listbox">
217. <div class="carousel-item active">
218. <div class="news-block">
219. <div class="news-media"><img class="img-fluid" src="http://grafreez.com/wp-
content/temp_demos/river/img/politics1.jpg" alt=""></div>
220. <div class="news-title">
221. <h2 class=" title-large"><a href="#">Ray madison may struggle to get best from
Paul in a 4-2-3-1 formation</a></h2>
222. </div>
223. <div class="news-des">Condimentum ultrices mi est a arcu at cum a elementum per
cum turpis dui vulputate vestibulum in vehicula montes vel. Mauris nam suspendisse consectetur
mus...</div>
224. <div class="time-text"><strong>2h ago</strong></div>
225. <div></div>
226. </div>
227. </div>
228. <div class="carousel-item">
229. <div class="news-block">
230. <div class="news-media"><img class="img-fluid" src="http://grafreez.com/wp-
content/temp_demos/river/img/sport1.jpg" alt=""></div>
231. <div class="news-title">
232. <h2 class=" title-large"><a href="#">An Alternative Form of Mental Health Care
Gains a Foothold</a></h2>
233. </div>
234. <div class="news-des">Condimentum ultrices mi est a arcu at cum a elementum per
cum turpis dui vulputate vestibulum in vehicula montes vel. Mauris nam suspendisse consectetur
mus...</div>
235. <div class="time-text"><strong>2h ago</strong></div>
236. <div></div>
237. </div>
238. </div>
239. <div class="carousel-item">
240. <div class="news-block">
241. <div class="news-media"><img class="img-fluid" src="http://grafreez.com/wp-
content/temp_demos/river/img/health.jpg" alt=""></div>
242. <div class="news-title">
243. <h2 class=" title-large"><a href="#">Key Republican Senator Says She Will Not
Vote for former president!</a></h2>
244. </div>
245. <div class="news-des">Condimentum ultrices mi est a arcu at cum a elementum per
cum turpis dui vulputate vestibulum in vehicula montes vel. Mauris nam suspendisse consectetur
mus...</div>
246. <div class="time-text"><strong>2h ago</strong></div>
247. <div></div>
248. </div>
249. </div>
250. </div>
251. </div>
252. </div>
253. </div>
254. </div>
255. </section>
256. <section class="section-01">
257. <div class="container">
258. <div class="row">
259. <div class="col-lg-8 col-md-12">
260. <h3 class="heading-large">Politics</h3>
261. <div class="">
262. <div class="col-lg-6 card">
263. <div class="card"> <img class="img-fluid"
src="http://grafreez.com/wp-content/temp_demos/river/img/war.jpg" alt="">
264. <div class="card-body">
265. <div class="news-title"><a href="#">
266. <h2 class=" title-small">Minorities Suffer From Unequal Pain Treatment</h2>
267. </a></div>
268. <p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.</p>
269. <p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
270. </div>
271. </div>
272. </div>
273. <div class="col-lg-6 card">
274. <div class="card"> <img class="img-fluid"
src="http://grafreez.com/wp-content/temp_demos/river/img/politics.jpg" alt="">
275. <div class="card-body">
276. <div class="news-title"><a href="#">
277. <h2 class=" title-small">Minorities Suffer From Unequal Pain Treatment</h2>
278. </a></div>
279. <p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.</p>
280. <p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
281. </div>
282. </div>
283. </div>
284. <div class="col-lg-6 card">
285. <div class="card"> <img class="img-fluid"
src="http://grafreez.com/wp-content/temp_demos/river/img/movie.jpg" alt="">
286. <div class="card-body">
287. <div class="news-title"><a href="#">
288. <h2 class=" title-small">Minorities Suffer From Unequal Pain Treatment</h2>
289. </a></div>
290. <p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.</p>
291. <p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
292. </div>
293. </div>
294. </div>
295. <div class="col-lg-6 card">
296. <div class="card"> <img class="img-fluid"
src="http://grafreez.com/wp-content/temp_demos/river/img/travel1.jpg" alt="">
297. <div class="card-body">
298. <div class="news-title"><a href="#">
299. <h2 class=" title-small">Minorities Suffer From Unequal Pain Treatment</h2>
300. </a></div>
301. <p class="card-text">Some quick example text to build on the card title and make up
the bulk of the card's content.</p>
302. <p class="card-text"><small class="text-time"><em>3 mins ago</em></small></p>
303. </div>
304. </div>
305. </div>
306. </div>
307. </div>
308. <aside class="col-lg-4 side-bar col-md-12">
309. <ul class="nav nav-tabs" role="tablist" id="myTab">
310. <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home"
role="tab">Latest</a> </li>
311. <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#profile"
role="tab">Top</a> </li>
312. <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#messages"
role="tab">Featured</a> </li>
313. </ul>
314.
315. <!-- Tab panes -->
316. <div class="tab-content sidebar-tabing" id="nav-tabContent">
317. <div class="tab-pane active" id="home" role="tabpanel">
318. <div class="media"> <a href="#"> <img class="d-flex mr-3"
src="http://grafreez.com/wp-content/temp_demos/river/img/sport2.jpg" alt="Generic
placeholder image"></a>
319. <div class="media-body">
320. <div class="news-title">
321. <h2 class="title-small"><a href="#">Key Republicans sign letter warning
against candidate</a></h2>
322. </div>
323. <div class="news-auther"><span class="time">1h ago</span></div>
324. </div>
325. </div>
326. <div class="media"> <a href="#"> <img class="d-flex mr-3"
src="http://grafreez.com/wp-content/temp_demos/river/img/lifestyle.jpg" alt="Generic
placeholder image"></a>
327. <div class="media-body">
328. <div class="news-title">
329. <h2 class="title-small"><a href="#">Obamacare Appears to Be Making People
Healthier</a></h2>
330. </div>
331. <div class="news-auther"><span class="time">1h ago</span></div>
332. </div>
333. </div>
334. <div class="media"> <a href="#"> <img class="d-flex mr-3"
src="http://grafreez.com/wp-content/temp_demos/river/img/food1.jpg" alt="Generic
placeholder image"></a>
335. <div class="media-body">
336. <div class="news-title">
337. <h2 class="title-small"><a href="#">Key Republicans sign letter warning against
candidate</a></h2>
338. </div>
339. <div class="news-auther"><span class="time">1h ago</span></div>
340. </div>
341. </div>
342. </div>
343. <div class="tab-pane" id="profile" role="tabpanel">
344. <div class="media"> <a href="#"> <img class="d-flex mr-3"
src="http://grafreez.com/wp-content/temp_demos/river/img/movie.jpg" alt="Generic
placeholder image"></a>
345. <div class="media-body">
346. <div class="news-title">
347. <h2 class="title-small"><a href="#">Key Republicans sign letter warning against
candidate</a></h2>
348. </div>
349. <div class="news-auther"><span class="time">1h ago</span></div>
350. </div>
351. </div>
352. <div class="media"> <a href="#"> <img class="d-flex mr-3"
src="http://grafreez.com/wp-content/temp_demos/river/img/auto.jpg" alt="Generic
placeholder image"></a>
353. <div class="media-body">
354. <div class="news-title">
355. <h2 class="title-small"><a href="#">‘S.N.L.’ to Lose Two Longtime Cast
Members</a></h2>
356. </div>
357. <div class="news-auther"><span class="time">1h ago</span></div>
358. </div>
359. </div>
360. <div class="media"> <a href="#"> <img class="d-flex mr-3"
src="http://grafreez.com/wp-content/temp_demos/river/img/business1.jpg" alt="Generic
placeholder image"></a>
361. <div class="media-body">
362. <div class="news-title">
363. <h2 class="title-small"><a href="#">Obamacare Appears to Be Making People
Healthier</a></h2>
364. </div>
365. <div class="news-auther"><span class="time">1h ago</span></div>
366. </div>
367. </div>
368. </div>
369. <div class="tab-pane" id="messages" role="tabpanel">
370. <div class="media"> <a href="#"> <img class="d-flex mr-3"
src="http://grafreez.com/wp-content/temp_demos/river/img/food.jpg" alt="Generic
placeholder image"></a>
371. <div class="media-body">
372. <div class="news-title">
373. <h2 class="title-small"><a href="#">Key Republicans sign letter warning against
candidate</a></h2>
374. </div>
375. <div class="news-auther"><span class="time">1h ago</span></div>
376. </div>
377. </div>
378. <div class="media"> <a href="#"> <img class="d-flex mr-3"
src="http://grafreez.com/wp-content/temp_demos/river/img/business.jpg" alt="Generic
placeholder image"></a>
379. <div class="media-body">
380. <div class="news-title">
381. <h2 class="title-small"><a href="#">‘S.N.L.’ to Lose Two Longtime Cast
Members</a></h2>
382. </div>
383. <div class="news-auther"><span class="time">1h ago</span></div>
384. </div>
385. </div>
386. <div class="media"> <a href="#"> <img class="d-flex mr-3"
src="http://grafreez.com/wp-content/temp_demos/river/img/sport1.jpg" alt="Generic
placeholder image"></a>
387. <div class="media-body">
388. <div class="news-title">
389. <h2 class="title-small"><a href="#">Key Republicans sign letter warning against
candidate</a></h2>
390. </div>
391. <div class="news-auther"><span class="time">1h ago</span></div>
392. </div>
393. </div>
394. </div>
395. </div>
396. <div class="video-sec">
397. <h4 class="heading-small">Featured Video</h4>
398. <div class="video-block">
399. <div class="embed-responsive embed-responsive-4by3">
400. <iframe class="embed-responsive-item"
src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
401. </div>
402. </div>
403. </div>
404. </aside>
405. </div>
406. </div>
407. </section>
408.
409. </body>
410. </html>

Set C:
1. Create following one page website layout using bootstrap

You might also like