Skip to content

Instantly share code, notes, and snippets.

@learnwell

learnwell/bootstrap-grid-view.html

Created March 23, 2019 00:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save learnwell/3e4ec6999473d608cea08fd0e9afefd7 to your computer and use it in GitHub Desktop.
Save learnwell/3e4ec6999473d608cea08fd0e9afefd7 to your computer and use it in GitHub Desktop.
Download ZIP
Working "Grid-View" example with bootstrap layout and cards
Raw
bootstrap-grid-view.html
<div class="container">
<div class="row">
<div class="col-4 bg-secondary">
.row &gt; .col-xs-4
</div>
<div class="col-4 bg-primary">
.row &gt; .col-xs-4
this is
a much
taller
column
than the others
<button class="btn btn-block btn-danger">test</button>
</div>
<div class="col-4 bg-secondary">
.row &gt; .col-xs-4
</div>
</div>
</div>
<h2>Grid View with colors and borders for torubleshooting</h2>
<div class="container">
<div class="row">
<div class="col-4 mb-4 bg-primary border border-danger">
<div class="card h-100">
<div class="card-body">
<!-- <h5 class="card-title">Special title treatment</h5> -->
<h5 class="card-title">
<b> Card Title 1 </b>
</h5>
</div>
<div class="card-footer">
<button class="btn btn-primary btn-block">i live</button>
</div>
</div>
</div>
<div class="col-4 mb-4 bg-primary border border-danger">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<b> Card Title 2 </b>
<p> deets a </p>
</h5>
</div>
</div>
</div>
<div class="col-4 mb-4 bg-primary border border-danger">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<b> Card Title 3 </b>
<p> deets a </p>
<p> deets a </p>
</h5>
</div>
<div class="card-footer">
<button class="btn btn-primary btn-block">i live</button>
</div>
</div>
</div>
<div class="col-4 mb-4 bg-primary border border-danger">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<b> Card Title 4 </b>
</h5>
</div>
<div class="card-footer">
<button class="btn btn-primary btn-block">i live</button>
</div>
</div>
</div>
<div class="col-4 mb-4 bg-primary border border-danger">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<b> Card Title 5 </b>
</h5>
</div>
</div>
</div>
<div class="col-4 mb-4 bg-primary border border-danger">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<b> Card Title 6 </b>
<p> deets a </p>
</h5>
</div>
</div>
</div>
</div>
</div>
<h2>Grid View (clean)</h2>
<div class="container">
<div class="row">
<div class="col-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<b> Card Title 1 </b>
</h5>
</div>
<div class="card-footer">
<button class="btn btn-primary btn-block">i live</button>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<b> Card Title 2 </b>
<p> deets a </p>
</h5>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<b> Card Title 3 </b>
<p> deets a </p>
<p> deets a </p>
</h5>
</div>
<div class="card-footer">
<button class="btn btn-primary btn-block">i live</button>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<b> Card Title 4 </b>
</h5>
</div>
<div class="card-footer">
<button class="btn btn-primary btn-block">i live</button>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<b> Card Title 5 </b>
</h5>
</div>
</div>
</div>
<div class="col-4 mb-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">
<b> Card Title 6 </b>
<p> deets a </p>
</h5>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment