CODEWITHSUNDEEP
imagetexttwitter-bootstrap-3carousel
lena
lena

Reputation: 97

Bootstrap 3 carousel image won't fit the whole screen and how to position the text?

I'm new to bootstrap and not that long into coding.

I created a carousel in bootstrap but the image is centered in the middle. but i want it to spread over the whole carousel. How do i fix this?

And i want the text on it be on te picture on the left side. How can i do this? I tried with text-align but maybe i did it at the wrong line. 

<div class="row dnd_bottomspace">
<div class="col-md-12">         
    <div id="myCarousel" class="carousel slide"  data-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>   
       <!-- Carousel items -->
        <div class="carousel-inner">
            <div class="active item">
                <h2>Slide 1</h2>
                <div class="carousel-caption">
                    <img src="Materialien/erde.jpg" class="img-responsive">
                  <h3>Erster Slider</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 2</h2>
                <div class="carousel-caption">
                    <img src="Materialien/erde.jpg" class="img-responsive">
                    <h3>Zweiter Slider</h3>
                    <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 3</h2>
                <div class="carousel-caption">
                    <img src="Materialien/erde.jpg" class="img-responsive">
                    <h3>Dritter Slider</h3>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </div>
            <div class="item">
                <h2>Slide 4</h2>
                <div class="carousel-caption">
                    <img src="Materialien/erde.jpg" class="img-responsive">
                    <h3>Vierter Slider</h3>
                    <p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 864

Answers (1)

thodoris
thodoris

Reputation: 41

this part should be into class="item"

<img src="Materialien/erde.jpg" class="img-responsive">

any text describing the picture or something should be into class="carousel-caption".

if you want the text to be on the left side then

<div class="carousel-caption" style="text-align:left;">

Upvotes: 1

Related Questions