skodev mascot typing keyboard

SKO.DEV

sekolah koding rasa baru
icon gambar buku BELAJAR icon gambar pohon KOMUNITAS icon gambar buku ARTIKEL icon gambar masuk MASUK

Postingan lainnya

Kelas Premium!
Belajar bikin website dari nol sekarang

cover kelas HTML dan CSS

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

html css
avatar toruchan
@toruchan

1 Kontribusi 0 Poin

Diperbarui 3 tahun yang lalu

Tanggapan

Pertanyaan kamu tidak jelas, coba dijelaskan lebih baik

1 Jawaban:

<div>coba kode nya dibuat seperti ini:&nbsp;</div><pre>&lt;head&gt; &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt; &lt;style&gt; .hero{ display: inline-block; width: 45%; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;section style="text-align: center;"&gt; &lt;h2&gt;Events&lt;/h2&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;

    &amp;lt;div class=&quot;hero&quot;&amp;gt;
      &amp;lt;div class=&quot;card mb-3&quot; style=&quot;max-width: 540px;&quot;&amp;gt;
      &amp;lt;div class=&quot;row no-gutters&quot;&amp;gt;
        &amp;lt;div class=&quot;col-md-4&quot;&amp;gt;
          &amp;lt;img src=&quot;https://lh3.googleusercontent.com/d/1klCt6l7VejLSQbbRpmu2fcdWLNP_sUJ8=s220&quot; alt=&quot;...&quot;&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;col-md-8&quot;&amp;gt;
          &amp;lt;div class=&quot;card-body&quot;&amp;gt;
            &amp;lt;h5 class=&quot;card-title&quot;&amp;gt;Card title&amp;lt;/h5&amp;gt;
            &amp;lt;p class=&quot;card-text&quot;&amp;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.&amp;lt;/p&amp;gt;
            &amp;lt;p class=&quot;card-text&quot;&amp;gt;&amp;lt;small class=&quot;text-muted&quot;&amp;gt;Last updated 3 mins ago&amp;lt;/small&amp;gt;&amp;lt;/p&amp;gt;
          &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
      &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;

    &amp;lt;div class=&quot;hero&quot;&amp;gt;
      &amp;lt;div class=&quot;card mb-3&quot; style=&quot;max-width: 540px;&quot;&amp;gt;
      &amp;lt;div class=&quot;row no-gutters&quot;&amp;gt;
        &amp;lt;div class=&quot;col-md-4&quot;&amp;gt;
          &amp;lt;img src=&quot;https://lh3.googleusercontent.com/d/1klCt6l7VejLSQbbRpmu2fcdWLNP_sUJ8=s220&quot; alt=&quot;...&quot;&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;col-md-8&quot;&amp;gt;
          &amp;lt;div class=&quot;card-body&quot;&amp;gt;
            &amp;lt;h5 class=&quot;card-title&quot;&amp;gt;Card title&amp;lt;/h5&amp;gt;
            &amp;lt;p class=&quot;card-text&quot;&amp;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.&amp;lt;/p&amp;gt;
            &amp;lt;p class=&quot;card-text&quot;&amp;gt;&amp;lt;small class=&quot;text-muted&quot;&amp;gt;Last updated 3 mins ago&amp;lt;/small&amp;gt;&amp;lt;/p&amp;gt;
          &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
      &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;

    &amp;lt;div class=&quot;hero&quot;&amp;gt;
      &amp;lt;div class=&quot;card mb-3&quot; style=&quot;max-width: 540px;&quot;&amp;gt;
      &amp;lt;div class=&quot;row no-gutters&quot;&amp;gt;
        &amp;lt;div class=&quot;col-md-4&quot;&amp;gt;
          &amp;lt;img src=&quot;https://lh3.googleusercontent.com/d/1klCt6l7VejLSQbbRpmu2fcdWLNP_sUJ8=s220&quot; alt=&quot;...&quot;&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;col-md-8&quot;&amp;gt;
          &amp;lt;div class=&quot;card-body&quot;&amp;gt;
            &amp;lt;h5 class=&quot;card-title&quot;&amp;gt;Card title&amp;lt;/h5&amp;gt;
            &amp;lt;p class=&quot;card-text&quot;&amp;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.&amp;lt;/p&amp;gt;
            &amp;lt;p class=&quot;card-text&quot;&amp;gt;&amp;lt;small class=&quot;text-muted&quot;&amp;gt;Last updated 3 mins ago&amp;lt;/small&amp;gt;&amp;lt;/p&amp;gt;
          &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
      &amp;lt;/div&amp;gt; 
    &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;
  &amp;lt;/section&amp;gt;

&lt;/body&gt;</pre><div><br>hasilnya bisa dilihat di :&nbsp;<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>

avatar NauraFaradisa
@NauraFaradisa

12 Kontribusi 10 Poin

Dipost 3 tahun yang lalu

Login untuk ikut Jawaban