Pada tutorial kali ini anda akan belajar bagaimana cara menghilangkan gutter pada bootstrap, silahkan ikuti tips berikut 
Hallo semuanya kembalinlagi di artikel dumet school, untuk kali ini saya akan memberikan tips atau tutorial bagaimana cara menghilangkan gutter pada bootstrap.
sebelumnya kita harus tau dulu apa yang di maksud dengan gutter yang saya maksud di atas, oke pada bootstrap ada yang namanya row dan column , yang di maksud dengan guuter adalah 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 adalah sebagai 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 Template</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 untuk 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 maka hasilnya adalah sebagai berikut :
oke seperti itulah teman-teman tips tentang bagaimana cara menghilangkan gutter pada bootstrap, sampai bertemu pada artikel selanjutnya.
The post Cara Menghilangkan Gutter Pada Bootstrap appeared first on Kursus Website Terbaik.