How can I prevent the background image to overflow so that the horizontal scroll bar wont appear? The layout of this page is two columns which the width of each part will be 50-50, the left part will be the login form and the right side will be the background image and logo. I also… Read More I want the background image to be the size of its parent container
How to change the slash color " / " in breadcrumb. I’ve tried to add color in css, there is no change <ol class="breadcrumb" style="font-size: 20px;"> <li class="breadcrumb-item" href="/homepage/index.html"> Home </li> <li class="breadcrumb-item"> Package </li> <li class="breadcrumb-item"> <span class="text-danger">Nusa Penida</span> </li> </ol> .section-details-header{ min-height: 43px; background: ; margin-top: -45px; } .section-details-content{ color:#ffffff; } .breadcrumb{ color:#fff;… Read More Change color slash " / " breadcrumb
Trying to work on making the header portion of my website (starting with the mobile class). When I am trying to create a col-xs-7 which contains one h1 and two p tags, and a col-xs-5 which contains an image. The col-xs-7 completely takes over the entire row and throws the col-xs-5 column into a new… Read More Bootstrap – row cols aren't aligning – image is going into a completely new row
Situation I successfully created a transparent navbar which is overlayed on top of header image which has an SVG curve assigned to it. I’ve been able to create the transparent navbar by amending some of the classes associated with the navbar such as removing bg-light for instance. I’ve been able to overlay the navbar on… Read More Static transparent navbar over header image
I have this div that is parent for ul. I tried to make ul center vertically but I do not know why I see this situation: <div className=" d-flex align-items-center bg-primary "> <ul className="d-flex align-items-center bg-success" style={{ gap: "3em" }} > <li className="bg-danger">vision</li> <li>consorzio</li> <li>contatti</li> </ul> </div> the bg-success is not got centered in bg-primary… Read More make <ul> center vertically by bootstrap
As I am not a fan of CSS decided to use Bootstrap to my little project. However, one of the container is going over page view and I cannot understand why. <!– STYLE –> <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD” crossorigin=”anonymous”> <nav class=”navbar bg-primary”> <div class=”container text-white justify-content-center”> <h1>Weather Dashboard</h1> </div> </nav> <main class=””> <div class=”row”> <div… Read More Bootstrap container is going over the page view
I use bootstrap 5 <div class="col-lg-3 col-md-6"> <h5 class="text-light mb-4">Stay in contact</h5> <p><i class="fa fa-map-marker-alt me-3"></i>619 Otaroad-north-Sidrac, New York, New York 291290 </p> <p><i class="fa fa-phone-alt me-3"></i><a href="tel:213-622-1212">213-622-1212</a></p> <p><i class="fa fa-envelope me-3"></i><a href="mailto:bob@bob.usa">bob@bob.usa</a></p> </div> How to align text on multiline? Is there a way to align New York with 619? I tried to replace p… Read More Align multiline
I need help to remove space above the navbar My HTML code: https://pastecode.io/s/uia7zv3t My CSS code: https://pastecode.io/s/ba5qtpmp >Solution : Your .container class has 30px margin top and bottom, I believe that’s what you meant. Anyway, your body also has a margin you should reset, and you should use tag in body to load CSS, but… Read More CSS – Any Tip to remove the space?
I am using bootstrap to conditionally display content only on larger devices. It works, but there is an issue: <a class="navbar-brand p-0" href="#"><img src="images/logo.png" alt=""><span class="d-none d-md-block">My strapline<span></a> The problem – the span content now aligns under the logo, rather than next to it without the "d-none d-md-block" class attributes. How do I get the… Read More Bootstrap hide element puts content on new line
I’m working on an assignment and I’m only allowed to use HTML, CSS & Bootstrap. I started my project and everything went well until I noticed there’s a gap on the right side of my container. Why is this and how can I remove it? Thanks in advance! HTML: <!DOCTYPE html> <html lang="en"> <head> <meta… Read More Why is there a gap on the right side of my container?