Carousel - Positioning with respect to TABS

Bootstrap Studio Help
1

I have found in the widest format browser, that my 1024x768 slides don't cover a vertical sliver on the right, it is left gray. Therefore, what I tried to do was move the entire Carousel over by putting <Container> Carousel Slide-swiper<br /> <Row> <Column> #carousel-1 <Slides> locked <slide> <slide> etc Now when <Column> is highlighted in OPTIONS I can set Column Size for each of the 4 screen width LG MD SM XS Column Size LG =10 MD = 10 SM = 8 XS = 8 Column Offset LG=1 MD=1 SM=2 XS=2

Now the screen slides to the right and is centered on the screen pretty much and the grey area is no longer then on the LG screen, but there is a problem. Other parts of the website now appear offset to the right, such as the TABS that I've created. Should I be doing this?

Is there a better way to fix the grey area to the right of the slides when on the LG screen (slides are 1024x768 mostly)?

See this for an example: http://spring-resonance-9636.bss.design/ I will have to do the same <Row> <Column> & OPTIONS: Column Size and Column Offset for both the TABS and any content in each of the TABS.

I am not so sure this is a good idea!

2

That's kind of what you do.

Before you made this change everything was directly under the carousel right? Well you could just drag everything to be under the carousel again so everything is within the column under the carousel. You don't "have" to make another row and column etc...

You could also redesign your content where maybe your nav/tabs are to the right or left of the carousel as an optional idea.

<div class="row">
    <div class="col-md-8">
        Carousel ...
    </div>
    <div class="col-md-4">
        Nav/Tabs ...
    </div>
    <div class="col-md-12">
        Content ...
    </div>
</div>

Saj

3 
"Before you made this change everything was directly under the carousel right? "

Correct, Saj. I guess it is pretty flexible. I am finding that I want the slides to be somewhat smaller at XL and LG because the height of the photos overwhelms the layouts particularly on our widescreen laptops at the XL and LG displays. So I am actually restricting the width of the <Container><Row> <Column> above <Carousel> to:

Column Size
LG = 8
MD= 10
SM =12
XS =8

Column Offset
 LG = 2
 MD= 1
 SM =0
 XS =2

And that seems to work pretty well. I've decided to leave the TABS full width "12" because that is good for having room for all the TABS on one line, and Text, Tables, Photos, etc in each TAB can use that width and space. It may not look as good in some configurations, but it is best.

For the design, I may make a visual line just below the Carousel above the TABS, that goes full width.

Its very nice to know that I could adjust the TABS and TAB Contents to follow the Column widths above in the Carousel. Its pretty flexible!

I lost the temporary website for some reason. It just disappeared. This one is up for a month now http://crimson-paper-3666.bss.design/ sorry.

Thanks Saj!

4

Note, Saj suggested reorganization and simplification of my first BSS website using a SINGLE CONTAINER just under the BODY tag.

<Body>
     <Container>
            Everything else

The Carousel located under the Container, still appears to under an additional <Row> and <Column> however. I have tested "Carousel" being just under the <Container> and it does work fine that way. However at the LG display and MD display, I'd like to have the Carousel be smaller to limit the vertical size of the photos, so I have used Columns=10 and Column Offset=1 to do that. So I need the <Row> and <Column> components to do that.