2

I have a Slider with images which works as a sliding component and above that i want to place a constant block of content that will be displayed at the center of the block aligned center to the page irrespective of the screen size as shown below.

enter image description here

<div id="homeSlider"> 
    <!-- Slider -->
    <div class="carousel" id="my-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" style="background-image:url(img/slider_img2.jpg);"></div>
        <div class="item" style="background-image:url(img/slider_img1.jpg);"></div>
        <div class="item" style="background-image:url(img/slider_img3.jpg);"></div>
      </div>
      <a href="#my-carousel" class="carousel-control left" data-slide="prev">&lsaquo;</a> <a href="#my-carousel" class="carousel-control right" data-slide="next">&rsaquo;</a> </div>

    <!-- /Slider -->

    <div class="mainPitch">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h1>Reach  out  to  Apartment  Residents</h1>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
            <div class="mainAction"><a class="btn btn-danger" href="">a</a><a class="btn btn-success" href="">a</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
Harsha M V
  • 54,075
  • 125
  • 354
  • 529

3 Answers3

5

html for your #mainPitch:

 <div class="mainPitch" style="position:absolute; top:50px;">
      <div class="container">
        <div class="row">
          <div class="col-xs-6" style="text-align:center;">
            <h1>Reach  out  to  Apartment  Residents</h1>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h3>
            <div class="mainAction"><a class="btn btn-danger" href="">a</a><a class="btn btn-success" href="">a</a></div>
          </div>
        </div>
      </div>
</div>

Wrap your carousel in a .col-xs-6 or change the class according your carousel's width.

See: http://bootply.com/101530

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • my carousel needs to be full page width outside the container. will that be a problem? – Harsha M V Dec 21 '13 at 05:09
  • yeah exactly. now i want to place the content at the center.. but the slideshow which is in the bg should stretch the whole length – Harsha M V Dec 21 '13 at 13:31
  • 1
    the images in the carousel are responsive by default (see also http://stackoverflow.com/questions/17932509/images-not-responsive-by-default-in-twitter-bootstrap-3/17933207#17933207) to stretch theme whole length you will need larger images, see: http://bootply.com/101889 – Bass Jobsen Dec 21 '13 at 13:57
  • i mean the images carousel with be outside the .container. which is followed by the div with the content on the top. so since the carousel is not limited and centered the top:50% will move it to the left:0 as well. i want the content to be something like margin: 0 auto; – Harsha M V Dec 25 '13 at 06:04
  • 1
    i not sure i understand you well. Try `$('.mainPitch').css('top',($('.carousel-inner').height()/2));` maybe. – Bass Jobsen Dec 25 '13 at 08:53
1

Refer to here. http://www.sitepoint.com/css-center-position-absolute-div/. I had the same problem and the 1st comment on the bottom of this article fixed it for me. Try..

left: 0px;
right:0px;
margin: 0 auto;
Jamil
  • 11
  • 1
0
<div>
<div class="content-div">Content DIV</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="http://placehold.it/1160x600" alt="..." />
            <div class="carousel-caption">This is caption</div>
        </div>
        <div class="item">
            <img src="http://placehold.it/1160x600" alt="..." />
            <div class="carousel-caption">This is caption</div>
        </div>
    </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Find below the CSS part:

.content-div {
text-align: center;
background: #090;
color: #fff;
width: 50%;
height: 150px;
position:absolute;
top:150px;
z-index:9;}

.carousel-inner{
width:100%;
position:relative;}
@media (min-width: 992px) {
.content-div {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;}}
Ipsita
  • 21
  • 2