Membagi Kolom Grid Saat Di Device Yang Berbeda Pada Bootstrap

Hai, kembali laginih di artikel saya, Di awal bulan ini saya akan memberikan tutorial tentang bootstrap yaitu  Membagi Kolom Grid  Saat Di Device Yang Berbeda Pada Bootstrap . Dari judul di atas apa kalian sudah menangkap gambaran apa yang akan saya kasih tau ? kalau tidak, saya akan menjelaskanya, Jadi saya akan memberikan cara untuk memberi grid kolom yang berbeda pada setiap device.

Pada bootstrap seperti yang kita ketahui, bootstrap menggunakan system grid untuk layoutnya nah jika kita membuat design website atau membuat web menggunakan bootstrap kita juga harus memikirkan bagaimana layout web kita di setiap device, karena tujuan kita menggunakan bootstrap itu untuk membuat agar website kita dapat di buka pada device atau gadget apapun tetapi tetap menarik.

Saya telah membuat beberapa baris code , di sini saya menggunakan bootstrap versi 3.0 kalian bisa langsung copy atau pelajari terlebih dahulu untuk memahaminya :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <menu>
 
   <article>
   <div class="container-fluid">
    <div class="row no-gutter text-center">
        <div class="col-md-3 col-sm-6 col-xs-6">
            <span><button class="btn btn-danger btn-lg"></span>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-6">   
			<span><button class="btn btn-danger btn-lg"></span>  
		</div>
        <div class="col-md-3 col-sm-6 col-xs-6">
			<span><button class="btn btn-danger btn-lg"></span>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-6">
            <span><button class="btn btn-danger btn-lg"></span>
        </div>
    </div>
</div>


   </article>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Pada code di atas bisa kita lihat penggunaan <div class=”col-md-3 col-sm-6 col-xs-6″> kok di dalam satu class col saya menggunakan tiga col ? maksudnya gimana ? nah kegunaan menggunakan pemanggilan tiga col(kolom) di dalam satu div adalah agar setiap device dapat kita atur pembagian kolomnya sesuai dengan apa yang kita inginkan. Jika kalian buka di browser maka kira-kira tampilanya akan seperti berikut:

Di buka pada desktop device (col-md-3) :

Di buka pada Small device (col-sm-6):

Di buika pada Extra small device (col-xs-6):

Ya itulah tutorial saya kali ini, saya sudahh mencoba menjelaskanya dengan cara yang sederhana  dan semoga kalian memahaminya.
sampai bertemu pada artikel selanjutnya.

Terimakasih