Pengenalan Column Offset di Bootstrap
Halo semuanya , kali ini saya akan membawakan bahan mengenai bootstrap yaitu Pengenalan Column Offset di Bootstrap , Apa kegunaan dari Class Column offset di bootstrap ? Offset berfungsi menggeser kolom ke kanan sepanjang kolom yang diberikan, contohnya seandainya panjang 6 dan ingin di posisikan di tengah berarti offsetnya 3.. Syntax-nya col-x-offset-xx .
Sekiranya saya mempunyai column sebesar 6 dan ingin memindahkan ke tengah layar karenanya saya hanya perlu menambahkan class offset-3 yang bermakna saya menambahkan column di depan sebanyak tiga. Sehingga column 6 nya pindah ke tengah layar.
Contohnya seperti ini :
<!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 Tampilan</title>
<!-- CSS-->
<link href=css/bootstrap.min.css rel=stylesheet>
<link href=css/kustom.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]-->
<!-- 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>
<script src=js/init/init.js></script>
</script>
<style>
.Test1{
background: grey;
}
.Test2{
background: deeppink;
}
.Test3{
background: red;
}
</style>
</head>
<body>
<div class=container>
<div class=row align=center>
<div class=col-md-6 col-md-offset-3 Test1>6</div>
</div>
<div class=row align=center>
<div class=col-md-8 col-md-offset-2 Test2>8</div>
</div>
<div class=row align=center>
<div class=col-md-12 col-md-offset-0 Test3>12</div>
</div>
</div>
</body>
</html>
Karenanya hasilnya akan seperti ini :
Offset akan menambahkan column di depan sebesar yang kita berikan.
Oke itu saja dan semoga bermanfaat, see you 🙂
Sumber https://kursuswebsite.org
