#Bootstrap: Carousel with banner

<div id="carouselExampleControls2" class="carousel slide" data-ride="carousel" data-interval="3000">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<div class="g-banner">
				<figure class="effect-chico">
					<img class="lazyload" data-src="https://cdn.shopify.com/s/files/1/0092/7563/7839/articles/14038.jpg?v=1564701684">
					<figcaption>
						<h2>Html<span>Builder</span>
						</h2>
						<p>Easy to use in product, collection, blog.</p>
						<a href="/pages/html-template">View more</a>
					</figcaption>
				</figure>
			</div>
		</div>
		<div class="carousel-item">
			<div class="g-banner">
				<figure class="effect-chico">
					<img class="lazyload" data-src="https://cdn.shopify.com/s/files/1/0092/7563/7839/articles/2309.jpg?v=1564701875">
					<figcaption>
						<h2>Easy <span>Use</span>
						</h2>
						<p>Fully responsive HTML.</p>
						<a href="/pages/html-template">View more</a>
					</figcaption>
				</figure>
			</div>
		</div>
		<div class="carousel-item">
			<div class="g-banner">
				<figure class="effect-chico">
					<img class="lazyload" data-src="https://cdn.shopify.com/s/files/1/0092/7563/7839/articles/O9ZJNP0.jpg?v=1564640887">
					<figcaption>
						<h2>In <span>2020</span>
						</h2>
						<p>Copy codes and paste</p>
						<a href="/pages/html-template">View more</a>
					</figcaption>
				</figure>
			</div>
		</div>
	</div>
	<a class="carousel-control-prev disabled-anchor" href="#carouselExampleControls2" role="button" data-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
	</a>
	<a class="carousel-control-next disabled-anchor" href="#carouselExampleControls2" role="button" data-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
	</a>
</div>

Banner 1

<div class="g-banner">
	<figure class="effect-lily">
		<img class="lazyload" data-src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<div>
					<h2>Nice <span>Lily</span>
				</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
			</div>
			<a href="#">View more</a>
		</figcaption>			
	</figure>
</div>

Banner 2

<div class="g-banner">
	<figure class="effect-sadie">
		<img class="lazyload" data-src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Holy 
					<span>
						Sadie
					</span>
				</h2>
				<p>Sadie never took her eyes off me. <br>
					She had a dark soul.
				</p>
				<a href="#">View more</a>
			</figcaption>		
		</figure>
	</div>

Banner 3

<div class="g-banner">
	<figure class="effect-honey">
		<img src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Dreamy <span>Honey</span> <i>Now</i>
			</h2>
			<a href="#">View more</a>
		</figcaption>			
	</figure>
</div>

Banner 4

<div class="g-banner">
	<figure class="effect-layla">
		<img src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Crazy <span>Layla</span>
			</h2>
			<p>When Layla appears, she brings an eternal summer along.</p>
			<a href="#">View more</a>
		</figcaption>		
	</figure>
</div>

Banner 5

<div class="g-banner">
	<figure class="effect-zoe">
		<img src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Creative <span>Zoe</span>
			</h2>
			<p class="icon-links">
				<a href="#"><span class="icon-heart"></span></a>
				<a href="#"><span class="icon-eye"></span></a>
				<a href="#"><span class="icon-paper-clip"></span></a>
			</p>
			<p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
		</figcaption>	
	</figure>
</div>

Banner 6

<div class="g-banner">
	<figure class="effect-oscar">
		<img src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Warm <span>Oscar</span>
			</h2>
			<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
			<a href="#">View more</a>
		</figcaption>	
	</figure>
</div>

Banner 7

<div class="g-banner">
	<figure class="effect-marley">
		<img src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Sweet <span>Marley</span>
</h2>
				<p>Marley tried to convince her but she was not interested.</p>
				<a href="#">View more</a>
			</figcaption>	
		</figure>
	</div>

Banner 8

<div class="g-banner">
	<figure class="effect-ruby">
		<img src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Glowing <span>Ruby</span>
</h2>
				<p>Ruby did not need any help. Everybody knew that.</p>
				<a href="#">View more</a>
			</figcaption>
		</figure>
	</div>

Banner 9

<div class="g-banner">
	<figure class="effect-roxy">
		<img src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Charming <span>Roxy</span>
</h2>
				<p>Roxy was my best friend. She'd cross any border for me.</p>
				<a href="#">View more</a>
			</figcaption>
		</figure>
	</div>

Banner 10

<div class="g-banner">
	<figure class="effect-bubba">
		<img src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Fresh <span>Bubba</span>
</h2>
				<p>Bubba likes to appear out of thin air.</p>
				<a href="#">View more</a>
			</figcaption>
		</figure>
	</div>

Banner 11

<div class="g-banner">
	<figure class="effect-romeo">
		<img src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Wild <span>Romeo</span>
</h2>
				<p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
				<a href="#">View more</a>
			</figcaption>
		</figure>
	</div>

Banner 12

<div class="g-banner">
	<figure class="effect-dexter">
		<img src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Strange <span>Dexter</span>
</h2>
				<p>Dexter had his own strange way. You could watch him training ants.</p>
				<a href="#">View more</a>
			</figcaption>
		</figure>
	</div>

Banner 13

<div class="g-banner">
	<figure class="effect-sarah">
		<img src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Free <span>Sarah</span>
</h2>
				<p>Sarah likes to watch clouds. She's quite depressed.</p>
				<a href="#">View more</a>
			</figcaption>
		</figure>
	</div>

Banner 14

<div class="g-banner">
	<figure class="effect-chico">
		<img src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Silly <span>Chico</span>
</h2>
				<p>Chico's main fear was missing the morning bus.</p>
				<a href="#">View more</a>
			</figcaption>
		</figure>
	</div>

Banner 15

<div class="g-banner">
	<figure class="effect-milo">
		<img src="https://cdn.shopify.com/s/files/1/0091/2801/7967/files/14374.jpg?18942">
			<figcaption>
				<h2>Faithful <span>Milo</span>
</h2>
				<p>Milo went to the woods. He took a fun ride and never came back.</p>
				<a href="#">View more</a>
			</figcaption>
		</figure>
	</div>

Alert

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

Badges

<h1>Example heading <span class="badge badge-secondary">New</span>
</h1>
<h2>Example heading <span class="badge badge-secondary">New</span>
</h2>
<h3>Example heading <span class="badge badge-secondary">New</span>
</h3>
<h4>Example heading <span class="badge badge-secondary">New</span>
</h4>
<h5>Example heading <span class="badge badge-secondary">New</span>
</h5>
<h6>Example heading <span class="badge badge-secondary">New</span>
</h6>
<hr>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

Example heading New

Primary Secondary Success Danger Warning Info Light Dark

Breadcrumb

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Spinner loading

<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>
<hr>
<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>

Quote

<div class="row">
	<div class="col-lg-10 mx-auto">
		<blockquote class="blockquote blockquote-custom bg-white p-5 shadow rounded">
			<div class="blockquote-custom-icon bg-info shadow-sm"></div>
			<p class="mb-0 mt-2 font-italic">
				"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
				<a href="#" class="text-info">@consequat</a>."
			</p>
			<footer class="blockquote-footer pt-4 mt-4 border-top">
				Someone famous in
				<cite title="Source Title">Source Title</cite>
			</footer>
		</blockquote>
	</div>
</div>

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo @consequat."

Someone famous in Source Title

Video

<div class="js-video" style="height:300px">
  <video loop="" onmouseover="this.play()" onmouseout="this.pause()">
    <source type="video/mp4" src="https://cdn.shopify.com/s/files/1/0092/7563/7839/files/Videomenu.mp4?39752">
  </source></video>
</div>

Maps

<div class="gmap-iframe"><div class="mapouter">
<div class="gmap_canvas"><iframe width="1080" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></div>
<style>.mapouter{position:relative;text-align:right;height:500px;width:1080px}.gmap_canvas{overflow:hidden;background:0 0!important;height:500px;width:1080px}.gmap-iframe .gmap_canvas,.gmap-iframe .mapouter,.gmap-iframe iframe{width:100%!important}@media (max-width:767px){.gmap-iframe .gmap_canvas,.gmap-iframe .mapouter,.gmap-iframe iframe{height:350px!important}}</div></div></style>
</div></div>

Size chart 1

<table class="table-responsive">
	<thead>
		<tr>
			<th>SIZE</th>
			<th>2T</th>
			<th>3T</th>
			<th>4T</th>
			<th>5T</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Height</td>
			<td>34-35</td>
			<td>36-38</td>
			<td>39-41</td>
			<td>42-44</td>
		</tr>
		<tr>
			<td>Waist</td>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr>
			<td>Inseam</td>
			<td>13</td>
			<td>14.5</td>
			<td>16</td>
			<td>18</td>
		</tr>
	</tbody>
</table>

SIZE	2T	3T	4T	5T
Height	34-35	36-38	39-41	42-44
Waist	21	22	23	24
Inseam	13	14.5	16	18

Size chart 2

<table class="table-striped">
	<thead>
		<tr>
			<th>SIZE</th>
			<th>2T</th>
			<th>3T</th>
			<th>4T</th>
			<th>5T</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Height</td>
			<td>34-35</td>
			<td>36-38</td>
			<td>39-41</td>
			<td>42-44</td>
		</tr>
		<tr>
			<td>Waist</td>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr>
			<td>Inseam</td>
			<td>13</td>
			<td>14.5</td>
			<td>16</td>
			<td>18</td>
		</tr>
	</tbody>
</table>

SIZE	2T	3T	4T	5T
Height	34-35	36-38	39-41	42-44
Waist	21	22	23	24
Inseam	13	14.5	16	18

Size chart 3

<table class="table-dark">
	<thead>
		<tr>
			<th>SIZE</th>
			<th>2T</th>
			<th>3T</th>
			<th>4T</th>
			<th>5T</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Height</td>
			<td>34-35</td>
			<td>36-38</td>
			<td>39-41</td>
			<td>42-44</td>
		</tr>
		<tr>
			<td>Waist</td>
			<td>21</td>
			<td>22</td>
			<td>23</td>
			<td>24</td>
		</tr>
		<tr>
			<td>Inseam</td>
			<td>13</td>
			<td>14.5</td>
			<td>16</td>
			<td>18</td>
		</tr>
	</tbody>
</table>

SIZE	2T	3T	4T	5T
Height	34-35	36-38	39-41	42-44
Waist	21	22	23	24
Inseam	13	14.5	16	18

Product description

<div class="col-md-8"><img src="https://cdn.shopify.com/s/files/1/1175/4850/files/image-elements.jpg?1853122762138647899" alt="Image elements"></div>

Timeline 1

<div class="container py-2">
	<div class="row">
		<div class="col-auto text-center flex-column d-none d-sm-flex">
			<div class="row h-50">
				<div class="col"> </div>
				<div class="col"> </div>
			</div>
			<h5 class="m-2">
				<span class="badge badge-pill bg-light border"> </span>
			</h5>
			<div class="row h-50">
				<div class="col border-right"> </div>
				<div class="col"> </div>
			</div>
		</div>
		<div class="col py-2">
			<div class="card">
				<div class="card-body">
					／／ ＨＴＭＬ ＣＯＤＥ
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-auto text-center flex-column d-none d-sm-flex">
			<div class="row h-50">
				<div class="col border-right"> </div>
				<div class="col"> </div>
			</div>
			<h5 class="m-2">
				<span class="badge badge-pill bg-success"> </span>
			</h5>
			<div class="row h-50">
				<div class="col border-right"> </div>
				<div class="col"> </div>
			</div>
		</div>
		<div class="col py-2">
			<div class="card border-success shadow">
				<div class="card-body">
					／／ ＨＴＭＬ ＣＯＤＥ
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-auto text-center flex-column d-none d-sm-flex">
			<div class="row h-50">
				<div class="col border-right"> </div>
				<div class="col"> </div>
			</div>
			<h5 class="m-2">
				<span class="badge badge-pill bg-light border"> </span>
			</h5>
			<div class="row h-50">
				<div class="col border-right"> </div>
				<div class="col"> </div>
			</div>
		</div>
		<div class="col py-2">
			<div class="card">
				<div class="card-body">
					／／ ＨＴＭＬ ＣＯＤＥ
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-auto text-center flex-column d-none d-sm-flex">
			<div class="row h-50">
				<div class="col border-right"> </div>
				<div class="col"> </div>
			</div>
			<h5 class="m-2">
				<span class="badge badge-pill bg-light border"> </span>
			</h5>
			<div class="row h-50">
				<div class="col"> </div>
				<div class="col"> </div>
			</div>
		</div>
		<div class="col py-2">
			<div class="card">
				<div class="card-body">
					／／ ＨＴＭＬ ＣＯＤＥ
				</div>
			</div>
		</div>
	</div>
</div>

／／ＨＴＭＬＣＯＤＥ

Timeline 2

<div class="container py-2">
	<div class="row no-gutters">
		<div class="col-sm"></div>
		<div class="col-sm-1 text-center flex-column d-none d-sm-flex">
			<div class="row h-50">
				<div class="col"> </div>
				<div class="col"> </div>
			</div>
			<h5 class="m-2">
				<span class="badge badge-pill bg-light border"> </span>
			</h5>
			<div class="row h-50">
				<div class="col border-right"> </div>
				<div class="col"> </div>
			</div>
		</div>
		<div class="col-sm py-2">
			<div class="card">
				<div class="card-body">
					／／ ＨＴＭＬ ＣＯＤＥ
				</div>
			</div>
		</div>
	</div>
	<div class="row no-gutters">
		<div class="col-sm py-2">
			<div class="card border-success shadow">
				<div class="card-body">
					／／ ＨＴＭＬ ＣＯＤＥ
				</div>
			</div>
		</div>
		<div class="col-sm-1 text-center flex-column d-none d-sm-flex">
			<div class="row h-50">
				<div class="col border-right"> </div>
				<div class="col"> </div>
			</div>
			<h5 class="m-2">
				<span class="badge badge-pill bg-success"> </span>
			</h5>
			<div class="row h-50">
				<div class="col border-right"> </div>
				<div class="col"> </div>
			</div>
		</div>
		<div class="col-sm"></div>
	</div>
	<div class="row no-gutters">
		<div class="col-sm"></div>
		<div class="col-sm-1 text-center flex-column d-none d-sm-flex">
			<div class="row h-50">
				<div class="col border-right"> </div>
				<div class="col"> </div>
			</div>
			<h5 class="m-2">
				<span class="badge badge-pill bg-light border"> </span>
			</h5>
			<div class="row h-50">
				<div class="col border-right"> </div>
				<div class="col"> </div>
			</div>
		</div>
		<div class="col-sm py-2">
			<div class="card">
				<div class="card-body">
					／／ ＨＴＭＬ ＣＯＤＥ
				</div>
			</div>
		</div>
	</div>
	<div class="row no-gutters">
		<div class="col-sm py-2">
			<div class="card">
				<div class="card-body">
					／／ ＨＴＭＬ ＣＯＤＥ
				</div>
			</div>
		</div>
		<div class="col-sm-1 text-center flex-column d-none d-sm-flex">
			<div class="row h-50">
				<div class="col border-right"> </div>
				<div class="col"> </div>
			</div>
			<h5 class="m-2">
				<span class="badge badge-pill bg-light border"> </span>
			</h5>
			<div class="row h-50">
				<div class="col"> </div>
				<div class="col"> </div>
			</div>
		</div>
		<div class="col-sm"></div>
	</div>
</div>

／／ＨＴＭＬＣＯＤＥ

Faqs

<div class="container py-3">
	<div class="row">
		<div class="col-10 mx-auto">
			<div class="accordion" id="faqExample">
				<div class="card">
					<div class="card-header p-2" id="headingOne">
						<h5 class="mb-0">
							<button class="btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
								Q: How does this work?
							</button>
						</h5>
					</div>
					<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#faqExample">
						<div class="card-body">
							<b>Answer:</b> It works using the Bootstrap 4 collapse component with cards to make a vertical accordion that expands and collapses as questions are toggled.
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card-header p-2" id="headingTwo">
						<h5 class="mb-0">
							<button class="btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
								Q: What is Bootstrap 4?
							</button>
						</h5>
					</div>
					<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#faqExample">
						<div class="card-body">
							Bootstrap is the most popular CSS framework in the world. The latest version released in 2018 is Bootstrap 4. Bootstrap can be used to quickly build responsive websites.
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card-header p-2" id="headingThree">
						<h5 class="mb-0">
							<button class="btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
								Q. What is another question?
							</button>
						</h5>
					</div>
					<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#faqExample">
						<div class="card-body">
							The answer to the question can go here.
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card-header p-2" id="headingThree">
						<h5 class="mb-0">
							<button class="btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
								Q. What is the next question?
							</button>
						</h5>
					</div>
					<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#faqExample">
						<div class="card-body">
							The answer to this question can go here. This FAQ example can contain all the Q/A that is needed.
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Answer: It works using the Bootstrap 4 collapse component with cards to make a vertical accordion that expands and collapses as questions are toggled.

Bootstrap is the most popular CSS framework in the world. The latest version released in 2018 is Bootstrap 4. Bootstrap can be used to quickly build responsive websites.

The answer to the question can go here.

The answer to this question can go here. This FAQ example can contain all the Q/A that is needed.

HTML generator

#Bootstrap: Carousel with banner

HtmlBuilder

Easy Use

In 2020

Banner 1

Nice Lily

Banner 2

Holy Sadie

Banner 3

Dreamy Honey Now

Banner 4

Crazy Layla

Banner 5

Creative Zoe

Banner 6

Warm Oscar

Banner 7

Sweet Marley

Banner 8

Glowing Ruby

Banner 9

Charming Roxy

Banner 10

Fresh Bubba

Banner 11

Wild Romeo

Banner 12

Strange Dexter

Banner 13

Free Sarah

Banner 14

Silly Chico

Banner 15

Faithful Milo

Alert

Badges

Example heading New