Highlighted

Bootstrap & centering [Was: Apologies: 2 questions]

Explorer ,
Oct 20, 2019

Copy link to clipboard

Copied

With apologies to the forum, I have two questions that are evading me. Please note that I'm using bootstrap 4 for the first time, so that is the basic problem. (I'm sure the problem is me not knowing how to use bootstrap.)

 

(1) I have tried to center a banner, but nothing seems to work. It's in a (div class="container"), and everything else in that seems to work. But inserting an image and centering it just won't work:

<img class="img-fluid pl-75 pr-75 ml-5 mr-5 w-50 h-50" src="images/29yearBanner.png" alt="Our 29th Year"/>

I've garbled the modifiers every which way, and can't get it to work. Any help would be appreciated!

 

(2) On another page, I have a field (div class="container-fluid whiteframe") with two columns in it. But I can't figure how to cause the container to reduce when the columns reduce to one.

<div class="container-fluid whiteframe">
<div class="row">
<div class="col-md-6"><img src="images/trngl&list_+notes_2019.png" alt="" width="510" class="img-fluid"> </div>
<div class="col_md_6"> <img src="images/trngl&list_2019_right.png" alt="" width="490" class="img-fluid" /> </div>
</div>
</div>

Has anyone an idea what I'm trying to say?

 

Any help would be appreciated!

Rick

 

[Topic edited by moderator for clarity.]

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

<img class="img-fluid d-block mx-auto" src="images/29yearBanner.png" alt="Our 29th Year"/>

TOPICS
Bootstrap, How to

Views

305

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Bootstrap & centering [Was: Apologies: 2 questions]

Explorer ,
Oct 20, 2019

Copy link to clipboard

Copied

With apologies to the forum, I have two questions that are evading me. Please note that I'm using bootstrap 4 for the first time, so that is the basic problem. (I'm sure the problem is me not knowing how to use bootstrap.)

 

(1) I have tried to center a banner, but nothing seems to work. It's in a (div class="container"), and everything else in that seems to work. But inserting an image and centering it just won't work:

<img class="img-fluid pl-75 pr-75 ml-5 mr-5 w-50 h-50" src="images/29yearBanner.png" alt="Our 29th Year"/>

I've garbled the modifiers every which way, and can't get it to work. Any help would be appreciated!

 

(2) On another page, I have a field (div class="container-fluid whiteframe") with two columns in it. But I can't figure how to cause the container to reduce when the columns reduce to one.

<div class="container-fluid whiteframe">
<div class="row">
<div class="col-md-6"><img src="images/trngl&list_+notes_2019.png" alt="" width="510" class="img-fluid"> </div>
<div class="col_md_6"> <img src="images/trngl&list_2019_right.png" alt="" width="490" class="img-fluid" /> </div>
</div>
</div>

Has anyone an idea what I'm trying to say?

 

Any help would be appreciated!

Rick

 

[Topic edited by moderator for clarity.]

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

<img class="img-fluid d-block mx-auto" src="images/29yearBanner.png" alt="Our 29th Year"/>

TOPICS
Bootstrap, How to

Views

306

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 20, 2019 0
Explorer ,
Oct 20, 2019

Copy link to clipboard

Copied

Okay, I just figured out the answer to problem #2. It was that I had the second column defined wrong. Should not have been class="col_md_6" but "col-md-6". So now there's only one,

Rick

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 20, 2019 0
Adobe Community Professional ,
Oct 20, 2019

Copy link to clipboard

Copied

<img class="img-fluid d-block mx-auto" src="images/29yearBanner.png" alt="Our 29th Year"/>


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 20, 2019 0
Explorer ,
Oct 21, 2019

Copy link to clipboard

Copied

Thanks, Ben. That solves the problem completely.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 21, 2019 0