Issue with centering image columns

Bootstrap Studio Help
1

Hi everyone,

I am trying to build a responsive "about us" section for my website like the example here: https://blackrockdigital.github.io/startbootstrap-agency/ where on larger devices the images are centered and on smaller ones they move left of the text.

The issue I am having here is that I can't seem to center the images on my website the way they do in the example. When using a row with two columns the image will not be in the center of the page and when using three columns the image will be centered but the layout looks strange on smaller devices.

I tried recreating this using the method in the example but Bootstrap Studio does not allow divs to be placed within a list element.

For reference, my website looks currently like this: portrayalmarketing.com

Any help would be really apricitated!

Thanks!

2

Ok, what I'm seeing with your code is that you haven't fully used the Options pane (top/right Gear Cog icon) Column Options yet.

First off the Bootstrap 4 Flexbox row/column setup is pretty powerful and the app takes into account those settings in the Options pane.

By default when you add a Column it is given a base class of col which is an equally shared width with other columns class. When there is only 1 to takes up the whole space when there is 2 columns that take up half the space each, when there's 3 it's thirds etc.. etc..

So with that you have the explicitly state the desired width of the columns if you don't want them to behave like that.

Since the intent of Bootstrap 4 is mobile first you will need to set the columns class to col-12 so that in a mobile first environment you set the column to take up the full width of the space. Then when your space (viewport) gets wider you need to set it to behave differently in this case for your site col-sm-6. Now also I'd assume you want the icon/image to appear on top of the paragraph text rather then below it. So another powerful feature of Flexbox is the order property. With mobile first you will need to add order-2 to the paragraph column and order-1 to the icon/image column. And then when the screen is wider, reverse the order.

So we'll hold off with anything else at this time because that pretty much will help you on figuring out how to set the other 2 spots.

So we'll start with the first component that has the Gear Cog icon/image.

In the app, select the element with the ID of over-ons-column-1 you can do that either in the Overview pane (bottom/left) or the HTML pane (bottom/middle/left). Notice that the class of that element is col. The ID of an element because the Label of the element in the Overview pane so it should be easy to find either way.

Once that element is selected, go to the Options pane (top/right Gear Cog icon). The first section Column Options has a menu item Width, set that to 12 and you will notice that the elements class changes from col to col-12. Now in the Options pane for the Width click on the arrow next to the word Width to expose the menu that will show the media breakpoints. For SM set to 6. On the element you should now see a new class added col-sm-6.

Now in the Options pane scroll down to where you see the Order property, set that to 2. Then click the arrow and set SM to 1. Two more classes show up on the element order-2 and order-sm-1.

Now select the element with the ID over-ons-column-2. Set it's Column Option Width to 12 and SM 6. Set it's Order to 1 and SM 2.

Now you should see that when in mobile view the Icon and Paragraph are stacked with the Icon displaying first. And when you move to a wider screen they will appear side by side with the icon on the right.

You will need to do similarly with the other 2 elements buy reverse the "order" on ID over-ons-column-3.

<hr />

I agree we should be able to drag a DIV into an LI that's how Navbar Dropdowns are created. I should be able to recreate that same thing manually.

As a side note you can mimic a DIV with a SPAN by setting that SPAN's CSS property display: block;

So all in all your first component should look like:

<div class="row" id="over-ons-row-1">
    <div class="col-12 col-sm-6 order-2 order-sm-1" id="over-ons-column-1">
        ...
    </div>
    <div class="col-12 col-sm-6 order-1 order-sm-2" id="over-ons-column-2">
        ...
    </div>
</div>

Saj

3

Just in case you are not aware, someone uploaded to the Online components that exact "Timeline" from that site. Images/paragraphs exactly the same. I have a feeling it's all or mostly done in Custom Code though.

Saj

4

Hi Saj,

Thank you for your help!

I actually did use the column settings (I found a couple of stack overflow threads about using this in combination with the flexbox) but it never gave me the desired effect. I did get them to stack but what I wanted, since it being stacked doesn't really feel logical when reading because it is a continues story, was the icon shrink and move to the left of the text like in the example.

I downloaded the online component and it looks like that the correct effect can be achieved by using the list group and DIVs instead of the normal LI. I'm going to base my design on this.

Thank you so much for your help! This community is one of the reasons I pulled the triggered and purchased BSS!

5

I've played around with several ways for centering images and the easiest way I found was to make sure the image was set to responsive (little slider button in the options of the image) then on the div/col/etc. that the image is inside (which it should be inside one) add the Class "text-center". That's all there is to it.

Seems strange to me to set the class to the container it's in, but thats what is working perfectly for me! Hope that helps.

6

Alright sounds good, glad you worked it out.

Just letting you know the that I put up an example of what I was saying at http://saj.bss.design/flexbox-alternating-columns.html. I hope you don't mind I'm linking the use of your images for this example only. :)

I included a spot that shows the HTML included and the little bit of CSS.

So you can see that the icons in mobile are on the left then in wider screens the icons alternate the paragraph columns

Uses 1 row with 6 columns, I think it's more semantic because the paragraph columns all come before the icons which I think is better for Accessibility use.

Saj

7

@ Portrayal

I really like the navbar you have used on your portrayalmarketing.com page but I can't find it in BSS. Could you point me to its source please?

8

@saj,

I don't mind at all! That looks really good actually, might switch to your method.

Thanks again for the help!

9

@digital,

Thanks, always nice to hear some good feedback!

I used the "Fixed Navbar start with transparency background BS4" online component you can get from within BSS. The JS is modified, you can read more about that here: https://bootstrapstudio.io/forums/topic/remove-transparency-on-menu-drop-down-javascript/

Hope this helps!