Bootstrap Snippet: Alternating Image and Text

Create an alternating image and text information for an interesting presentation of information. This is all created using bootstrap, so the styling is built in.

Header A

This is a Subhead A

PARAGRAPH A Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Header B

This is a Subhead B

PARAGRAPH B Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Header C

This is a Subhead C

PARAGRAPH C Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Header D

This is a Subhead D

PARAGRAPH D Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

How to Add Alternating Information and Images to your Site

Open the edit screen for your site and click on in the WYSWIYG editor to switch off the rich text editor.
Copy and paste the code below.
Substitute each HEADER, Subhead and PARAGRAPH with your information
Upload images to image fields 2, 3, 4 & 5

<div class="container-fluid">
                    <div class="row py-4">
                        <div class="col-md-6">
                            image2
                        </div>
                        <div class="col-md-6">
                            <h4 style="color: #FD3F01;">Header A</h4>
                                        <h5 style="color: 0B89FD;">This is a Subhead A</h5>
                        <p class="text-muted">PARAGRAPH A Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                        </div>
                    </div>
                    <div class="row py-4 flex-lg-row flex-column-reverse">
                        <div class="col-md-6">
                            <h4 style="color: #FD3F01;">Header B</h4>
                                         <h5 style="color: 0B89FD;">This is a Subhead B</h5>
                                         <p class="text-muted">PARAGRAPH B Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                        </div>
                        <div class="col-md-6">
                           image3
                        </div>
                    </div>
                    <div class="row py-4">
                        <div class="col-md-6">
                             image4
                        </div>
                        <div class="col-md-6">
                            <h4 style="color: #FD3F01;">Header C</h4>
                                        <h5 style="color: 0B89FD;">This is a Subhead C</h5>
                                         <p class="text-muted">PARAGRAPH C Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                        </div>
                    </div>
                    <div class="row py-4 flex-lg-row flex-column-reverse">
                        <div class="col-md-6">
                           <h4 style="color: #FD3F01;">Header D</h4>
                                        <h5 style="color: 0B89FD;">This is a Subhead D</h5>
                                        <p class="text-muted">PARAGRAPH D Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                        </div>
                        <div class="col-md-6">
                          image5
                        </div>
                    </div>
                </div>