Cara menempatkan button bootstrap di kanan

Table of Contents Show

Link Menu Rata Kanan
Membuat Bar Navigasi Atas
Cara Menengahkan Button Secara Vertikal
Cara Menengahkan Button Secara Vertikal DAN Horizontal

Pelajari cara membuat bilah navigasi dengan tautan rata kiri dan rata kanan.

Section Artikel

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-right {
  float: right;
}
</style>
</head>
<body>

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="topnav-right">
    <a href="#search">Search</a>
    <a href="#about">About</a>
  </div>
</div>

<div style="padding-left:16px">
  <h2>Navigasi Atas dengan Link Rata Kanan</h2>
  <p>Ini content...</p>
</div>

</body>
</html>

Membuat Bar Navigasi Atas

Langkah 1) Tambahkan HTML

Contoh:

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="topnav-right">
    <a href="#search">Search</a>
    <a href="#about">About</a>
  </div>

Langkah 2) Tambahkan CSS

Contoh:

/* Tambahkan warna background hitam ke navigasi atas */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Beri style link yang ada didalam bar navigasi */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Ubah warna link saat mengarahkan kursor */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Tambahkan warna pada link active/current */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Bagian rata kanan di dalam navigasi atas */
.topnav-right {
  float: right;
}

How To

Di bawah ini kita akan mempelajari cara memusatkan elemen tombol secara vertikal dan horizontal dengan CSS.

Cara Menengahkan Button Secara Vertikal

Contoh

<style>
.container {
  height: 200px;
  position: relative;
  border: 3px solid red;
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
</style>

<!DOCTYPE html>
<html>
<head>
<style>
.container { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
</style>
</head>
<body>

<h2>Vertical Center</h2>
<p>Dalam contoh ini, kita akan menggunakan pemosisian dan properti transformasi untuk memusatkan button secara vertikal di dalam elemen kontainer:</p>

<div class="container">
  <div class="vertical-center">
    <button>Centered Button</button>
  </div>
</div>

</body>
</html>

Cara Menengahkan Button Secara Vertikal DAN Horizontal

Contoh

<style>
.container {
  height: 200px;
  position: relative;
  border: 3px solid blue;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

<!DOCTYPE html>
<html>
<head>
<style>
.container { 
  height: 200px;
  position: relative;
  border: 3px solid blue; 
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>Dalam contoh ini, kita akan menggunakan pemosisian dan properti transformasi untuk memusatkan elemen tombol secara vertikal dan horizontal:</p>

<div class="container">
  <div class="center">
    <button>Centered Button</button>
  </div>
</div>

</body>
</html>

Bisa juga menggunakan flexbox untuk menengahkan:
Contoh

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid blue;
}

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid blue; 
}
</style>
</head>
<body>

<h1>Centering</h1>

<p>Sebuah container dengan properti justify-content dan align-items yang disetel ke <em> center </em> akan meratakan item di tengah (di kedua sumbu).</p>

<div class="center">
  <button>Centered Button</button>
</div>

</body>
</html>

CSSHow To