cara menghapus sebagian border dengan mudah menggunakan bootstrap

Masih membahas tentang bootstrap, dan masih mengulik efek cantik apa yang bisa kita gunakan menggunakan bootstrap 4 ini, pada kesempatan kali ini saya masih membahas yang sebenarnya mudah juga kita gunakan CSS biasa tanpa bootstrap tapi dengan menggunakan bootstrap kita lebih di permudahkan lagi, dengan memberi class bawaan yang di sediakan oleh boostrap kita sudah bisa mendapatkan efek yang ada pada boostrap contohnya seperti sekarang ini kita akan belajar cara menghapus sebagian border dengan mudah menggunakan bootstrap, sederhana bukan, yang sederhana itu lah yang biasanya indah hehe, nulis apa si, oke jangan kemana-mana simak terus ya teman-teman.

Sebelum kita menggunakan bootstrap atau sewaktu kita menggunakan css, untuk menghilangkan kita cukup menggunakan class baru, dimana border atau border mana yang mana yang ingin kita hapus, jadi kita harus buat class terlebih dahulu supaya border yang lain tidak kena efeknya juga, lalu di file CSS kita style lagi misal border atas yang ingin kita hapus, berarti kita gunakan border-top: none, hal ini jadi kerjaan dua kali betul tidak, nah jika gunakan boostrap terbaru atau boostrap 4 ini yang sedang saya gunakan dengan menambah class=”border-top-0, border yang atas akan terhapus secata otomatis keren bukan, oke langsung untuk belajar cara menghapus sebagian border dengan mudah menggunakan bootstrap saya contohkan, teman-teman perhatikan ya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <title>cara menghapus sebagian border dengan mudah menggunakan bootstrap</title>
    <span style="color: #0000ff"><-e-style type="text/css">
      .tes{
        border: 5px solid red;
      }
    <-e-/style></span>
  </head>
  <body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>cara menghapus sebagian border dengan mudah menggunakan bootstrap</h1>
      </div>
      <div class="col-md-2">
        <span <span style="color: #ff0000">class="border</span> <span style="color: #0000ff">tes</span>"> Contoh 1</span>
      </div>
      <div class="col-md-2">
        <span <span style="color: #ff0000">class="border-0</span> <span style="color: #0000ff">tes</span>"> Contoh 2</span>
      </div>
      <div class="col-md-2">
        <span <span style="color: #ff0000">class="border-top-0</span> <span style="color: #0000ff">tes</span>"> Contoh 3</span>
      </div>
      <div class="col-md-2">
        <span <span style="color: #ff0000">class="border-right-0</span> <span style="color: #0000ff">tes</span>"> Contoh 4</span>
      </div>
      <div class="col-md-2">
        <span <span style="color: #ff0000">class="border-bottom-0</span> <span style="color: #0000ff">tes</span>"> Contoh 5</span>
      </div>
      <div class="col-md-2">
        <span <span style="color: #ff0000">class="border-left-0</span> <span style="color: #0000ff">tes</span>" >  Contoh 6</span>
      </div>
    </div>
  </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <-e-script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"><-e-/script>
    <-e-script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"><-e-/script>
    <-e-script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"><-e-/script>
  </body>
</html>

Perlu teman-teman perhatikan sebelum saya menggunakan efek menghilangkan border yang terdapat pada bootstrap 4 ini, kita harus memberi efek pada si kontennya tersebut, coba teman-teman perhatikan saya menggunakan class tes untuk memberikan efek border dengan warna merah, jadi nanti kita akan tau efek menghilangkan border bekerja atau tidak, oke langsung saja bagaimana hasilnya:

teman-teman bisa lihat ya, oke saya rasa cukup jelas belajar kita tentang cara menghapus sebagian border dengan mudah menggunakan bootstrap, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Cara Menghapus Sebagian Border dengan Mudah Menggunakan Bootstrap

Kategori