CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Gaurav Chauhan
Gaurav Chauhan

Reputation: 1357

How to center text inside bootstrap carousel?

I need a simple text carousel like below. there will not be any image in carousel. Just text. Now it seems fine but the carousel controls, the arrows and that greyish edges at the both sides are not suitable for reading so i am trying to center text inside and i am not able to do it. I used "block-center" class as well as tried various combination of push,pull along with rows and container inside the carousel-content class. No success yet.

below is my code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="row">
            <div id="my-carousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#my-carousel" data-slide-to="1"></li>
                    <li data-target="#my-carousel" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="carousel-content">
                            <div class="text-center">
                                <h3>#1</h3>
                                <p>Proin at elementum sapien. Nam in sapien egestas, tempor sem in, porta diam. Integer bibendum tincidunt accumsan. Praesent ultrices metus ut urna vulputate, vel egestas tortor accumsan. Etiam nec dolor tempor, aliquet metus aliquet, scelerisque leo. Nunc in eros et nisl scelerisque bibendum. Suspendisse viverra dui in odio pretium rhoncus. Suspendisse dolor libero, laoreet et feugiat ac, lobortis et ipsum. Etiam lacus ipsum, vestibulum quis consequat sed, molestie vitae lectus. Praesent eu sapien vel risus iaculis rhoncus et et mi.</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-content">
                            <div class="text-center">
                                <h3>#2</h3>
                                <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam lorem quam, blandit sed laoreet non, scelerisque eu est. Fusce non urna vel ligula ultrices scelerisque. Cras non venenatis libero. In hac habitasse platea dictumst. Cras mattis ligula ac mauris aliquet condimentum. Quisque accumsan posuere accumsan. Nam facilisis lectus posuere nisi dignissim dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam interdum purus accumsan justo fermentum, id vulputate nibh luctus. Maecenas gravida elit in nulla sollicitudin, eu egestas ipsum luctus.</p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-content">
                            <div class="text-center">
                                <h3>#3</h3>
                                <p>Donec consequat eget nisi quis volutpat. Cras vitae tellus dui. Sed bibendum quam eget tempus luctus. Donec laoreet, diam ut condimentum malesuada, libero nisi feugiat nulla, a convallis ante urna a sem. Vivamus eget nibh et nunc iaculis varius. Nam in nunc velit. Quisque id lacinia lorem, ut dictum ipsum. Nullam eu fermentum dui, eget elementum massa. Duis tincidunt eros et euismod porta. Curabitur consectetur, ligula ac blandit maximus, nisl nunc luctus arcu, ornare rhoncus neque urna non neque. Donec in quam non nunc sollicitudin accumsan. Phasellus accumsan sit amet nibh nec suscipit. Donec eget congue nisi, sollicitudin feugiat odio. Donec congue diam orci, in eleifend nulla pharetra in. Integer felis lacus, facilisis id pharetra non, facilisis ut quam.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="#my-carousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#my-carousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>

    </div>
    <script src="Scripts/jquery-2.1.4.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>

Demo

enter image description here

Upvotes: 1

Views: 445

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

Add the below styleset after your bootstrap CSS

.carousel-inner {
  padding-left: 15%;
  padding-right: 15%;
}

Or if you want to do it in LESS the variable you want to look for is @carousel-control-width. So

.carousel-inner {
  padding-left: @carousel-control-width;
  padding-right: @carousel-control-width;
}

Both are equivalent and they push the content in from both sides by as much space as the carousel controls take up.

Upvotes: 2

Related Questions