Membuat header dengan bootstrap 5
Learn how to create a responsive header with CSS.
Responsive Header
Change the design of the header depending on the screen size. Resize the browser window to see the effect.
Try it Yourself »
Create A Responsive Header
Step 1] Add HTML:
Example
CompanyLogo
Home
Contact
About
Step 2] Add CSS:
Example
/* Style the header with a grey background and some padding */
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
/* Style the header links */
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
/* Style the logo link [notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
font-size: 25px;
font-weight: bold;
}
/* Change the background color on mouse-over */
.header a:hover {
background-color: #ddd;
color: black;
}
/* Style the active/current link*/
.header a.active {
background-color: dodgerblue;
color: white;
}
/* Float the link section to the right */
.header-right {
float: right;
}
/* Add media queries for responsiveness - when the
screen is 500px wide or less, stack the links on top of each other */
@media screen and [max-width: 500px] {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
Try it Yourself »
Tip: Go to our
CSS Navbar Tutorial to learn more about navigation bars.
Niagahoster
-
Home
-
About
-
Services
-
Login
2. Membuat Jumbotron
Jumbotron adalah komponen yang digunakan untuk menampilkan informasi yang di-highlight pada sebuah halaman website. Penggunaan jumbotron bertujuan agar pengunjung bisa lebih fokus dan menaruh perhatian lebih pada pesan yang ditampilkan.
Pada tutorial Bootstrap 5 ini, Anda bisa membuat custom jumbotron dengan utilities seperti contoh di bawah ini:
@niagahoster.id
Jl. Palagan Tentara Pelajar No.81, Jongkang, Sariharjo, Kec. Ngaglik, Kabupaten Sleman,
Daerah Istimewa Yogyakarta
55581
© 2021 Copyright: Niagahoster
Sudah Siap Menggunakan Bootstrap 5?
Demikianlah artikel lengkap tutorial Bootstrap 5. Anda sudah mengetahui apa saja hal baru di Bootstrap 5 dan
cara menggunakan Bootstrap 5, bukan?
Bootstrap 5 adalah versi terbaru dari salah satu front-end framework terbaik yang cepat dan ringan. untuk membantu proses pengembangan website. Dengan Bootstrap, Anda tidak perlu menulis kode CSS yang panjang, karena Anda bisa langsung menggunakan semua elemen yang disediakan Bootstrap.
Nah, jika website Bootstrap Anda telah
selesai, jangan lupa untuk meng-onlinekan nya agar bisa diakses oleh banyak orang, ya. Pilihlah layanan hosting yang aman dan bisa mendukung website Anda untuk selalu online 24 jam.
Layanan Unlimited Webhosting Indonesia Niagahoster tentu bisa menjadi pilihan yang tepat!
Dengan uptime 99.98%, Niagahoster menjamin website Anda selalu bisa diakses kapan saja. Tak hanya itu,
Niagahoster juga menggunakanImunify360 yang akan melindungi website dari serangan DDoS ataupun malware.
Menariknya, fitur tersebut bisa Anda nikmati hanya dengan harga mulai dari Rp10rb/bulan saja, loh. Sangat murah, kan?
Jadi, tunggu apa lagi? Yuk, online-kan website Bootstrap Anda dengan
layanan hosting terbaik dan termurah di Indonesia!