Wie kann man Untertitel bei einem Bootstrap Slider über das ganze Bild gehen lassen?

Hallo,

Da der Slider erst einmal den wichtigsten Satz zeigen soll, der eigentliche Text aber viel länger ist, würde ich gerne die Untertitel meines Bootstrap Sliders beim hovern über das ganze Bild gehen lassen...

--> Hinter den Untertiteln liegt ein roter, halbtransparenter, Balken und dieser sollte sich beim hovern über das ganze Bild ziehen und der ganze Text soll erscheinen.

hier der html-code:

 <div class="carousel-item active"> <img src="img_beispiel" class="d-block w-100" alt="Beispielbild">

     <div class="carousel-caption d-none d-md-block">

      <h5>Dies ist ein Beispielbild</h5>

      <button type="button" class="btn btn-link">Mehr lesen</button>

     </div>

    </div>

-->den Button "mehr lesen" bräuchte ich dann nicht (außer ihr habt eine Idee wie man dies umsetzt)

--> den Balken habe ich in einem Bildbearbeitungsprogramm eingefügt, vielleicht weiß jemand ja auch noch wie ich den in html und css in den Slider einbauen kann :D

so sieht die css Datei jetzt noch aus:

.carousel-caption{

font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

}

mehr habe ich da bis jetzt noch nicht drin stehen.

Da ich mich noch nicht so gut mit html, css und Bootstrap auskenne, bin ich für jede Hilfe dankbar :)

Vielen Dank schonmal im Vorraus!

Homepage, HTML, Webseite, CSS, HTML5, Code, Webdesign, Webentwicklung, Bootstrap
Bootstrap Layout?

Hallo,

arbeite momentan mit Bootstrap (Blazor) an einer Webseite.

Ich habe in meinem Container 3 Rows, wobei jede Row 3 Card Elemente hat.
Wenn ich nun aber mein Browserfenster kleiner mache verrutscht der Text:

Code:

<div class="container-fluid">


    <div class="row">
        <h3>Suche:</h3>
    </div>


    <div class="row p-2">
        <div class="row">
            <div class="row">
                <h2>Liste</h2>  
                <hr />
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Das Layout passt sich schon an, der innere Text aber nicht warum ?
Liegt es daran das ich ein <p> Tag verwende ?
Wie kann ich in Zukunft sowas verhindern ?

Sollte so aussehen:

Bild zum Beitrag
HTML, Webseite, programmieren, CSS, Visual Studio, Frontend, Bootstrap, Angular

Meistgelesene Fragen zum Thema Bootstrap