LinGeo

Return to:
G & L WebDesign

Layout 3 Columns


Also see, layout-sidebars for a 3rd option of re-ordering columns.

3 Column Layouts

With the main body on the left, it is always positioned at the top. Followed by the other 2 columns. On smaller screens the other two columns are configured to share the same "row" on medium screens and full width on small screens.
col-md-4 col-sm-12 mb-2
col-md-4 col-sm-6 mb-2
col-md-4 col-sm-6 mb-2

Main Body on Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo lorem, fermentum eget metus faucibus, mollis dignissim mauris. Duis pretium interdum urna, vitae efficitur eros rhoncus a. Sed ut augue ornare, elementum sapien et, maximus massa. Fusce a elit dapibus, volutpat ligula eleifend, cursus nulla. Curabitur porttitor urna eros, ut bibendum purus vulputate quis. Maecenas vel dolor venenatis, accumsan orci vitae, rhoncus sapien.

Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec

Card image cap
Nature

Waterfalls

Card image cap
Feature

Train Station

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo lorem, fermentum eget metus faucibus, mollis dignissim mauris. Duis pretium interdum urna, vitae efficitur eros rhoncus.

Card image cap
Nature

Surf's Up

3 Column Layouts

With the main body on the right, on smaller screens the other two columns are configured to share the same "row" on medium screens and full width on small screens.
div id="first-col" class="col-md mb-3"
div id="second-col" class="col-md mb-3"
div id="third-col" class="col-md mb-3"

Accordion Style 2

  • Lorem ipsum dolor sit amet
  • Facilisis id fringilla ut ligula vitae
  • Donec laoreet ultricies rhoncus
  • Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis metus vitae ligula elementum ut luctus lorem facilisis. Sed non leo nisl, ac euismod nisi. Aenean augue dolor, facilisis id fringilla ut, tempus vitae nibh. Nullam nec

Card image cap
Nature

Waterfalls

Card image cap
Feature

Waterfall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo lorem, fermentum eget metus faucibus, mollis dignissim mauris. Duis pretium interdum urna, vitae efficitur eros rhoncus.

Card image cap
Nature

Surf's Up

Main Body on Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo lorem, fermentum eget metus faucibus, mollis dignissim mauris. Duis pretium interdum urna, vitae efficitur eros rhoncus a. Sed ut augue ornare, elementum sapien et, maximus massa. Fusce a elit dapibus, volutpat ligula eleifend, cursus nulla. Curabitur porttitor urna eros, ut bibendum purus vulputate quis. Maecenas vel dolor venenatis, accumsan orci vitae, rhoncus sapien.

Style Switcher
12 Color Skins
Theme
See the instructions to easily create your own Skin and NavBar.