BootComponent
My Components
New Component
Edit Component
Run
Save
HTML
CSS
JS
<!-- HERO --> <section class="hero-section"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6"> <h1 class="hero-title"> Bangun Website Modern dengan Bootstrap </h1> <p class="hero-subtitle"> Template hero responsif dengan tombol call-to-action dan desain modern. </p> <div class="d-flex gap-3"> <a href="#" class="btn btn-primary btn-lg"> Mulai Sekarang </a> <a href="#" class="btn btn-outline-light btn-lg"> Pelajari Lagi </a> </div> </div> </div> </div> </section>
.hero-section { min-height: 100vh; background: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) ), url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1400') center/cover no-repeat; display: flex; align-items: center; color: white; } .hero-title { font-size: 3rem; font-weight: 700; } .hero-subtitle { font-size: 1.2rem; margin-top: 1rem; margin-bottom: 2rem; color: #dcdcdc; } @media (max-width: 768px) { .hero-title { font-size: 2.2rem; } }
// Add JavaScript here
Live Preview