我怎样才能让你喜欢在中心和背景图像中？ css bootsrap

Question

my code

 <div style="background-image: url('{{ asset('img/background-line.svg') }}')"> <div class="row my-10 justify-content-center"> <div class="col-auto"> <div class="card border-0 rounded-0 rounded-top"> <div class="card-body py-5"> <ul class="breadcrumb my-0 fs-5 breadcrumb-transparent font-weight-bold p-0"> <li class="breadcrumb-item"> <a href="#" class="text-muted"><i class="fa fa-home"></i></a> </li> <li class="breadcrumb-item"> <a href="#" class="text-muted">Layanan Investasi</a> </li> <li class="breadcrumb-item"> <a href="#" class="text-muted">Sektor Aneka ET</a> </li> </ul> </div> </div> </div> </div> </div> </div>

how can i make you like this in center and background image? css bootsrap so that Bradcome is fixed center

Answer 1

Try code below. You will need to remove the bottom border radius manually via css.

 .breadcrumb { border-bottom-left-radius: 0;important: border-bottom-right-radius; 0!important; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/> <div style="background-image: url('https://picsum.photos/1000')"> <div class="row justify-content-center"> <div class="col-auto"> <div class="card border-0 rounded-0 bg-transparent"> <div class="card-body mt-5 p-0"> <ul class="breadcrumb my-0 fs-5 breadcrumb-transparent font-weight-bold py-3 px-5"> <li class="breadcrumb-item"> <a href="#" class="text-muted"><i class="fa fa-home"></i></a> </li> <li class="breadcrumb-item"> <a href="#" class="text-muted">Layanan Investasi</a> </li> <li class="breadcrumb-item"> <a href="#" class="text-muted">Sektor Aneka ET</a> </li> </ul> </div> </div> </div> </div> </div>

Answer 2

Use class="card-body mt-5 p-0" instead of class="card-body py-5"

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/> <div style="background-image: url('https://www.freecodecamp.org/news/content/images/2021/06/w-qjCHPZbeXCQ-unsplash.jpg')"> <div class="row justify-content-center"> <div class="col-auto"> <div class="card border-0 rounded-0 bg-transparent"> <div class="card-body mt-5 p-0"> <ul class="breadcrumb my-0 fs-5 breadcrumb-transparent font-weight-bold py-3 px-5"> <li class="breadcrumb-item"> <a href="#" class="text-muted"><i class="fa fa-home"></i></a> </li> <li class="breadcrumb-item"> <a href="#" class="text-muted">Layanan Investasi</a> </li> <li class="breadcrumb-item"> <a href="#" class="text-muted">Sektor Aneka ET</a> </li> </ul> </div> </div> </div> </div> </div>