Public Forums 71,145 posts

[arthurjohnston Friend arthurjohnstonJoin date: November 2010Posts: 170Downloads:152Uploads:16 Thanks: 58 Thanked: 27 times in 2 posts]

#206181

I am using the following block for a slideshow. How can I center the block on the page, using BS3?


<div class="wrap ja-slideshow" id="new_slideshow">
<div class="container">
<div class="row">
<div class="center-block col-sm-12 col-md-8 col-lg-8">
<div class="main-slideshow">
<jdoc:include type="modules" name="<?php $this->_p('slideshow') ?>" style="raw" />
</div>
</div>
</div>
</div>
</div>


[arthurjohnston Friend arthurjohnstonJoin date: November 2010Posts: 170Downloads:152Uploads:16 Thanks: 58 Thanked: 27 times in 2 posts]

#570078

Sorry the question is:

I am using the following block for a slideshow. How can I center the block HORIZONTALLY on the page, using BS3?

Thank you,

[arthurjohnston Friend arthurjohnstonJoin date: November 2010Posts: 170Downloads:152Uploads:16 Thanks: 58 Thanked: 27 times in 2 posts]

#735150

Sorry the question is:

I am using the following block for a slideshow. How can I center the block HORIZONTALLY on the page, using BS3?

Thank you,

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#570121

Hi

Kindly check the number of grids you define for this slideshow: http://prntscr.com/73xjxn


<div class="col-sm-12 col-md-8 col-lg-8">
<div class="main-slideshow">


Currently, if you don’t have any extenion in the section called ‘main-siderbar’


<div class="col-xs-12 col-sm-4 col-lg-4">
<div class="main-siderbar">


you can change the number of grids for the slideshow to 12 (“col-sm-12 col-md-12 col-lg-12”)

The slideshow will display in center then.

[arthurjohnston Friend arthurjohnstonJoin date: November 2010Posts: 170Downloads:152Uploads:16 Thanks: 58 Thanked: 27 times in 2 posts]

#570232

<em>@Saguaros 472802 wrote:</em><blockquote>Hi

you can change the number of grids for the slideshow to 12 (“col-sm-12 col-md-12 col-lg-12”)

The slideshow will display in center then.</blockquote>

if I change the number of grids for the slideshow to 12 (“col-sm-12 col-md-12 col-lg-12”), it does not center the slideshow but causes the slideshow to fill the entire block.

**I wish to retain the current size of the slideshow and center the slideshow horizontally within the block.***

[arthurjohnston Friend arthurjohnstonJoin date: November 2010Posts: 170Downloads:152Uploads:16 Thanks: 58 Thanked: 27 times in 2 posts]

#735304

<em>@Saguaros 472802 wrote:</em><blockquote>Hi

you can change the number of grids for the slideshow to 12 (“col-sm-12 col-md-12 col-lg-12”)

The slideshow will display in center then.</blockquote>

if I change the number of grids for the slideshow to 12 (“col-sm-12 col-md-12 col-lg-12”), it does not center the slideshow but causes the slideshow to fill the entire block.

**I wish to retain the current size of the slideshow and center the slideshow horizontally within the block.***

[arthurjohnston Friend arthurjohnstonJoin date: November 2010Posts: 170Downloads:152Uploads:16 Thanks: 58 Thanked: 27 times in 2 posts]

#570268

<em>@arthurjohnston 472927 wrote:</em><blockquote>if I change the number of grids for the slideshow to 12 (“col-sm-12 col-md-12 col-lg-12”), it does not center the slideshow but causes the slideshow to fill the entire block.

**I wish to retain the current size of the slideshow and center the slideshow horizontally within the block.***</blockquote>

I modified the (“col-sm-12 col-md-12 col-lg-12″) which centered the slideshow horizontally within the block, as follows:

<div class=”col-sm-12 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3”>

While the above does center the slideshow horizontally, it modified the slideshow’s top-margin. What can I use to adjust the top-margin?

[arthurjohnston Friend arthurjohnstonJoin date: November 2010Posts: 170Downloads:152Uploads:16 Thanks: 58 Thanked: 27 times in 2 posts]

#735334

<em>@arthurjohnston 472927 wrote:</em><blockquote>if I change the number of grids for the slideshow to 12 (“col-sm-12 col-md-12 col-lg-12”), it does not center the slideshow but causes the slideshow to fill the entire block.

**I wish to retain the current size of the slideshow and center the slideshow horizontally within the block.***</blockquote>

I modified the (“col-sm-12 col-md-12 col-lg-12″) which centered the slideshow horizontally within the block, as follows:

<div class=”col-sm-12 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3”>

While the above does center the slideshow horizontally, it modified the slideshow’s top-margin. What can I use to adjust the top-margin?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#570283

If you want to set top margin for the slideshow, you can add rule:


div#new_slideshow.container {
margin-top: 10px; <<< or change to your desired value
}


1 user says Thank You to Saguaros for this useful post

1. arthurjohnston

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#735349

If you want to set top margin for the slideshow, you can add rule:


div#new_slideshow.container {
margin-top: 10px; <<< or change to your desired value
}


1 user says Thank You to Saguaros for this useful post

1. arthurjohnston

[arthurjohnston Friend arthurjohnstonJoin date: November 2010Posts: 170Downloads:152Uploads:16 Thanks: 58 Thanked: 27 times in 2 posts]

#570482

Thank you that did the trick. Just a few more adjustments and the front page will be all set!

Best wishes,

[arthurjohnston Friend arthurjohnstonJoin date: November 2010Posts: 170Downloads:152Uploads:16 Thanks: 58 Thanked: 27 times in 2 posts]

#735546

Thank you that did the trick. Just a few more adjustments and the front page will be all set!

Best wishes,

[Author]

Posts