0.00 (0 votes)

Would you like to divide one template position into many columns? It's not all, each column can be as wide as you wish!
You will be able to do it with bootstrap size option. Let's check it.

Let's take our JM-Lifestyle boostrap-based FREE template for Joomla 3.0 as an example. 
At first check all template positions to have a global look at the template layout. 

I'm going to use bottom module position to show you how it works.
Let's assume that we have not any modules assigned to this possition so we are going to create several custom modules.

 

Creating custom modules.

I will create 3 different custom modules with some examples from typoghraphy article. 
Let's navigate Extensions -> Module Manager  and click New then the list of all avilable module types list will be displayed. Since I want to create my own HTML Module using a WYSIWYG editor I choose Custom HTML option.

Then fill in the basic info in the new module:
 

custommodule-step1


As you can see the title is required only but take a closer to:

  1. Position - choose bottom position name 
  2. Make sure you've choose the correct one. It's easy since the list is divided into sections of each template that is currently installed.
  3. Then choose Custom Output tab to enter the HTML code from typoghraphy article
  4. check description for Advenced Option tab

 

Custom Output tab.
 

custommodule-step2

 

Simply click on HTML icon and enter the custom code you would like to use from typoghraphy article.

OK so now we've got 3 modules at the same position:
 

custommodule-step3

You can use filter on the left side to select modules assigned to the particulat module position.
I like the module order so now I can use  Bootstrap Size option for each module to place all 3 module in one row and different column width.

 

Advanced Options tab.

I would like to divide my bottom position into 3 columns: 25% - 25% - 50%
Taking into account bootstrap grid system rules , I will edit each module at select adequate values for my 3 columns: 3 - 3 - 6
 

custommodule-step4

 

The result looks as follows.
 

custommodule-step5

 

As you can see comlumns widths reflect values we would like to get.
By the way, if you create another module at this position the module will go to the next row and then you can continiue dividing! 

Users' reviews

Total rating: (0 votes) Log-in to add review

Video Tutorials

EF4 Framework for Joomla! 3 - introduction

Joomla! 3 Quickstart Installation Guide

Speed up your website! Must watch video!

How to create Joomla article?

Joomla ReCaptcha - how to set up?

How to use Joomla editors?

How to display a module in Joomla article?

How to configure Joomla contact form?

How to check Joomla module positions names?

How to configure your language for Joomla 3?

How to create Joomla custom HTML module?

How to create Joomla menu?

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2018 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.