Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Memindahkan Card ke tengah
Kasus
ask.jpgsaya pakai bootstrap 4 ini code nya:
<section>
<h2>Events</h2>
<div class="hero">
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="coming-soon.png" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="hero">
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="coming-soon.png" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="hero">
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="coming-soon.png" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="hero">
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="coming-soon.png" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</section>
Mau saya jadi seperti ini kak....
ask2.png
Tanggapan
Pertanyaan kamu tidak jelas, coba dijelaskan lebih baik
1 Jawaban:
<div>coba kode nya dibuat seperti ini: </div><pre><head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style> .hero{ display: inline-block; width: 45%; } </style> </head> <body> <section style="text-align: center;"> <h2>Events</h2> <div class="hero"> <div class="card mb-3" style="max-width: 540px;"> <div class="row no-gutters"> <div class="col-md-4"> <img src="https://lh3.googleusercontent.com/d/1klCt6l7VejLSQbbRpmu2fcdWLNP_sUJ8=s220" alt="..."> </div> <div class="col-md-8"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> </div> </div> </div> </div> </div>
&lt;div class="hero"&gt;
&lt;div class="card mb-3" style="max-width: 540px;"&gt;
&lt;div class="row no-gutters"&gt;
&lt;div class="col-md-4"&gt;
&lt;img src="https://lh3.googleusercontent.com/d/1klCt6l7VejLSQbbRpmu2fcdWLNP_sUJ8=s220" alt="..."&gt;
&lt;/div&gt;
&lt;div class="col-md-8"&gt;
&lt;div class="card-body"&gt;
&lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
&lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
&lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="hero"&gt;
&lt;div class="card mb-3" style="max-width: 540px;"&gt;
&lt;div class="row no-gutters"&gt;
&lt;div class="col-md-4"&gt;
&lt;img src="https://lh3.googleusercontent.com/d/1klCt6l7VejLSQbbRpmu2fcdWLNP_sUJ8=s220" alt="..."&gt;
&lt;/div&gt;
&lt;div class="col-md-8"&gt;
&lt;div class="card-body"&gt;
&lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
&lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
&lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="hero"&gt;
&lt;div class="card mb-3" style="max-width: 540px;"&gt;
&lt;div class="row no-gutters"&gt;
&lt;div class="col-md-4"&gt;
&lt;img src="https://lh3.googleusercontent.com/d/1klCt6l7VejLSQbbRpmu2fcdWLNP_sUJ8=s220" alt="..."&gt;
&lt;/div&gt;
&lt;div class="col-md-8"&gt;
&lt;div class="card-body"&gt;
&lt;h5 class="card-title"&gt;Card title&lt;/h5&gt;
&lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
&lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
</body></pre><div><br>hasilnya bisa dilihat di : <br><a href="https://www.w3schools.com/code/tryit.asp?filename=GRK9J4VDCNH9">https://www.w3schools.com/code/tryit.asp?filename=GRK9J4VDCNH9</a><br><br></div>