Cara Menghilangkan Gutter Pada Bootstrap
Di panduan kali ini kamu akan belajar bagaimana cara menghilangkan gutter di bootstrap, silahkan ikuti tips berikut 🙂
Hallo semuanya kembalinlagi di artikel Source Code Aplikasi, bagi kali ini saya akan memberikan tips atau panduan bagaimana cara menghilangkan gutter di bootstrap.
sebelumnya kita mesti tau dulu apa yang di maksud dengan gutter yang saya maksud di atas, oke di bootstrap ada yang namanya row dan column , yang di maksud dengan guuter yaitu spasi bawaan dari bootstrap yang memberikan jarak antar column. lihat contoh di bawah :
caranya kita hanya menambahkan css di bawah ini ;
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
contoh ful dan implementasinya yaitu selaku berikut:
<!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 Tema</title>
<!-- Bootstrap -->
<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.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.3/html5shiv.min.js></script>
<script src=https://oss.maxcdn.com/respond/1.4.2/respond.min.js></script>
<![endif]-->
<style>
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
h1 { margin-bottom: 50px; }
h1, h2 { text-align: center; }
.container {
background: #e3e3e3;
margin-bottom: 20px;
padding-bottom: 50px;
}
p {
background: pink;
margin: 0;
}
i {
color: pink;
}
</style>
</head>
<body>
<h1>CSS Helper bagi Gutterless <strong>Bootstrap 3</strong> Columns <i class=fa fa-heart></i></h1>
<div class=container>
<div class=row>
<h2>Dengan Gutter</h2>
<div class=col-sm-4>
<a href=# class=btn btn-block btn-primary>Full width Button</a>
</div>
<div class=col-sm-4>
<a href=# class=btn btn-block btn-primary>Full width Button</a>
</div>
<div class=col-sm-4>
<a href=# class=btn btn-block btn-primary>Full width Button</a>
</div>
</div>
</div>
<div class=container>
<div class=row no-gutter>
<h2>Tanpa Gutter</h2>
<div class=col-sm-4>
<a href=# class=btn btn-block btn-primary>Full width Button</a>
</div>
<div class=col-sm-4>
<a href=# class=btn btn-block btn-primary>Full width Button</a>
</div>
<div class=col-sm-4>
<a href=# class=btn btn-block btn-primary>Full width Button</a>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js></script>
</body>
</html>
setelah kalian salin karenanya hasilnya yaitu selaku berikut :
oke seperti seperti itulah teman-teman tips mengenai bagaimana cara menghilangkan gutter di bootstrap, hingga bertemu di artikel berikutnya.
Sumber https://kursuswebsite.org
