Jika kita bicara width berarti yang kita bahas kali ini adalah tentang lebar, walaupun sangat simple tapi jika kita menggunakan bootstrap terbaru ini akan lebih simple lagi loh teman-teman, seperti biasa dengan class bawaan bootstrap kita bisa membuat efek yang di timbulkan dari bootstrap yaitu untuk mengatur width, maka dari itu untuk belajar cara mengatur width dengan mudah menggunakan bootstrap, Simak terus ya teman-teman.
Walaupun kita bisa mengatur dengan manual, atau dengan cara seperti biasannya, disini saya ingin berbagi saja, ada cara lain atau cara mudahnya ketika kita mengatur width di sebuah halaman website, yaitu dengan bootstrap, oke bagaiamana cara mengatur width dengan mudah menggunakan bootstrap, teman-teman perhatikan strukutur halaman website berikut ini:
<!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">
<title>Cara Mengatur Width dengan Mudah Menggunakan Bootstrap</title>
<!-- 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">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Cara Mengatur Width dengan Mudah Menggunakan Bootstrap</h1>
<div class="row bg-success">
<div class="col-md-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's <span class="d-block bg-warning"> standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span> . It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="col-md-6">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy <span class="d-block bg-success"> text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="w-25 p-3" style="background-color: #563D7C;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #FFE5E5;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #D5D5D8;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #FFCF99;">Width 100%</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>
Coba teman-teman perhatikan baris
<div class="w-25 p-3" style="background-color: #563D7C;">Width 25%</div>
ada class 2-25 p-3 berarti kita akan memberikan width dengan 25%, dan padding 3% dan selanjutnya, coba sekarang kita lihat hasilnya.
Bagaimana sangat mudah ya, oke saya rasa cukup sampai disini belajar kita tentang cara mengatur width dengan mudah menggunakan bootstrap, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.
The post Cara Mengatur Width dengan Mudah Menggunakan Bootstrap appeared first on Kursus Website Terbaik.