Need to align bootstrap carousel and make its bullets working

Question

I have a carousel of text that need to be aligned, also not sure how to make its bullets active.

By clicking on the demo link below you would see the bullet points are not in the middle of the page and based on size of the name and the text the distance between name and bullet get changed.

I need all of them (text,name,bullets) be in the middle of the page for any screen size.

Demo

Updated demo

.carousel-content {
    color: black;
    display: flex;
    align-items: center;
}

.name {
    color: black;
    display: block;
    font-size: 20px;
    text-align: center;
}

.mytext {
    border-left: medium none;
    font-size: 24px;
    font-weight: 200;
    line-height: 1.3em;
    margin-bottom: 10px;
    padding: 0 !important;
    text-align: center;
}

.bullets li {
    background: none repeat scroll 0 0 #ccc;
    border: medium none;
    cursor: pointer;
    display: inline-block;
    float: none;
    height: 10px;
    width: 10px;
}

.bullets li:last-child {
    margin-right: 0;
}

.bullets li {
    border-radius: 1000px;
}
<div id="carousel-example" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="row">
        <div class="col-xs-offset-3 col-xs-6">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="carousel-content">
                        <div>
                            <h3>#1</h3>
                            <p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>
                            <h3>#2</h3>
                            <p>This is another much longer item. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>
                            <h3>#3</h3>                            
                            <p>This is the third item.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#carousel-example" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
 <a class="right carousel-control" href="#carousel-example" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

</div>

        setCarouselHeight('#carousel-example');

        function setCarouselHeight(id) {
            var slideHeight = [];
            $(id + ' .item').each(function() {
                // add all slide heights to an array
                slideHeight.push($(this).height());
            });

            // find the tallest item
            max = Math.max.apply(null, slideHeight);

            // set the slide's height
            $(id + ' .carousel-content').each(function() {
                $(this).css('height', max + 'px');
            });
        }

UPDATE

I changed the code of bullets to the following and it causes them to move a bit to to the top. (in the middle of the text)

<div class="col-xs-offset-4 col-xs-8">
      <ol class="bullets carousel-indicators"> 
        <li class="active" data-target="#carousel-example" data-slide-to="1"></li>
        <li class="" data-target="#carousel-example" data-slide-to="2"></li>
        <li class="" data-target="#carousel-example" data-slide-to="3"></li>
        </ol>

Answer 1

Just a few changes to make it all work:

1) Zero indexing. Start data-slide-to from 0, not from 1:

<ol class="bullets carousel-indicators"> 
    <li ... data-slide-to="0"></li>
    <li ... data-slide-to="1"></li>
    <li ... data-slide-to="2"></li>
</ol>

2) Slides padding. Add some extra padding to slides for bullets:

.carousel-content {
    ...
    padding: 20px 0 50px 0;
}

3) Bullets offset. Reduce bottom bullets offset to look it better:

.bullets {
    ...
    bottom: 10px;
}

Demo

Answer 2

First of all. Change your bullets to this

    <ol class="bullets carousel-indicators"> 
      <li class="active" data-target="#carousel-example" data-slide-to="0"></li>
      <li class="" data-target="#carousel-example" data-slide-to="2"></li>
      <li class="" data-target="#carousel-example" data-slide-to="1"></li>
    </ol>

Javascript counts from 0

I've added some css for the bullets and de slider container. And I moved the bullets to the back of the parent div.. It seems to work

http://jsfiddle.net/gfcnqzy2/17/

Answer 3

Try this rules in .bullets element:

.bullets {
    margin: 0;
    padding: 0;
    text-align: center;
}

Change the wrapper's offset to 2:

<div class="col-xs-offset-2 col-xs-8">

Also, reset margin and padding from ol:

ol {
   margin: 0;
   padding: 0;
}

Check the DEMO