"Layouts - Moodle 3.3.3"
Bootstrap 2.3.2 Snippet by dgcruzing

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/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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="container">
<div class="row">
<h2>Add the CSS and the code below to play</h2>
</div>
<div class="editor-indent" style="margin-left: 20px; padding: 0 0 0 40px; margin-right: 50px">
<div class="inner">
<h1>Grid Items</h1>
</div>
</header>
<div class="example">
<ul class="cards">
<li>
<h2>Card 1</h2>
<p>These cards have been laid out using grid layout. By setting <code>display: grid</code> on the parent, all direct children become grid items.</p>
</li>
<li>
<h2>Card 2</h2>
<p>These cards have been laid out using grid layout. By setting <code>display: grid</code> on the parent, all direct children become grid items.</p>
</li>
<li>
<h2>Card 3</h2>
<p>These cards have been laid out using grid layout. By setting <code>display: grid</code> on the parent, all direct children become grid items.</p>
</li>
<li>
<h2>Card 4</h2>
<p>These cards have been laid out using grid layout. By setting <code>display: grid</code> on the parent, all direct children become grid items.</p>
</li>
<li>
<h2>Card 5</h2>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.cards {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap:20px;
}
.cards li {
background-color: #D4E4F7;
border: 1px solid #d0bfff;
padding: 10px;
border-radius: 5px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: