5 couloms in one row

webcompanysale
73 Posts
webcompanysale posted this 01 June 2016

hi
i want to create 5 couloms in one row 20% each colum.
the program give me to chouse the % but not 20% there//

hi i want to create 5 couloms in one row 20% each colum. the program give me to chouse the % but not 20% there//
Vote to pay developers attention to this features or issue.
11 Comments
Order By: Standard | Newest
gcg
62 Posts
gcg posted this 01 June 2016

Hi webcompanysale,

Solved in this forum post: http://answers.themler.com/questions/81857/5-columms-with-same-width

Follow my post, good luck

Hi webcompanysale, Solved in this forum post: http://answers.themler.com/questions/81857/5-columms-with-same-width Follow my post, good luck
Support Team
Support Team posted this 01 June 2016

Hi,

You can do it with the custom CSS. There is no possibility to do it directly in the application as we are using Bootstrap and Bootstrap is providing 12-grid layout that can not be equally divided into 5 parts.

Sincerely,
Hella

Hi, You can do it with the custom CSS. There is no possibility to do it directly in the application as we are using Bootstrap and Bootstrap is providing 12-grid layout that can not be equally divided into 5 parts. Sincerely, Hella
webcompanysale
73 Posts
webcompanysale posted this 01 June 2016

how i do it with css?

how i do it with css?
gcg
62 Posts
gcg posted this 01 June 2016

Hi webcompanysale,

Follow this simple steps directly in Themler:

1.- Add this custom CSS to your template directly in Themler > Theme Settings > Additional CSS:

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-15 {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}

2.- Use the follow sample code in your Html or CMS template to create 5 columns row:

Add to each of 5 columns div this class > class="col-xs-12 col-sm-15 col-md-15 col-lg-15"

3.- Thats all!

Goog luck

Hi webcompanysale, Follow this simple steps directly in Themler: **1.- Add this custom CSS to your template directly in Themler > Theme Settings > Additional CSS:** .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } } **2.- Use the follow sample code in your Html or CMS template to create 5 columns row:** Add to each of 5 columns div this class > ***class="col-xs-12 col-sm-15 col-md-15 col-lg-15"*** **3.- Thats all!** Goog luck

Last edited 01 June 2016 by gcg

webcompanysale
73 Posts
webcompanysale posted this 01 June 2016

1 step-- o.k
step 2?????

1 step-- o.k step 2?????
gcg
62 Posts
gcg posted this 01 June 2016

Sorry, i mean:

When you create a new row with Bootstrap class like its explained here: http://getbootstrap.com/css/#grid, in any column div add this class code: class="col-xs-12 col-sm-15 col-md-15 col-lg-15"

If you are using columns shortcodes of Themler, then this is not possible.

Sorry, i mean: When you create a new row with Bootstrap class like its explained here: http://getbootstrap.com/css/#grid, in any column div add this class code: ***class="col-xs-12 col-sm-15 col-md-15 col-lg-15"*** If you are using columns shortcodes of Themler, then this is not possible.
webcompanysale
73 Posts
webcompanysale posted this 01 June 2016

i use themler...

i use themler...
webcompanysale
73 Posts
webcompanysale posted this 01 June 2016

i just need like this

i just need like this
gcg
62 Posts
gcg posted this 01 June 2016

Hi webcompanysale,

Yes, this custom CSS is added to Themler directly and you can use it to make this 5 columns design that you attach.

1.- You only have to copy/paste the CSS in Themler > Theme Settings > Additional CSS > Save the template > Export/Import.

2.- In your content sections, add a bootstrap row div with his inner 5 columns divs. In each of this 5 columns divs copy/paste this class: class="col-xs-12 col-sm-15 col-md-15 col-lg-15"

3.- With this steps, you will have 5 columns of 20% like your design, and only have to add the content of each column.

Better explained?

Hi webcompanysale, Yes, this custom CSS is added to Themler directly and you can use it to make this 5 columns design that you attach. 1.- You only have to copy/paste the CSS in Themler > Theme Settings > Additional CSS > Save the template > Export/Import. 2.- In your content sections, add a bootstrap row div with his inner 5 columns divs. In each of this 5 columns divs copy/paste this class: ***class="col-xs-12 col-sm-15 col-md-15 col-lg-15"*** 3.- With this steps, you will have 5 columns of 20% like your design, and only have to add the content of each column. Better explained?
Giuma
91 Posts
Giuma posted this 10 October 2016

2.- Use the follow sample code in your Html or CMS template to create 5 columns row:

Add to each of 5 columns div this class > class="col-xs-12 col-sm-15 col-md-15 col-lg-15"

3.- Thats all!

Goog luck

where i can put custom class in themler to a clumn div?

> **2.- Use the follow sample code in your Html or CMS template to create 5 columns row:** > > Add to each of 5 columns div this class > ***class="col-xs-12 col-sm-15 col-md-15 col-lg-15"*** > > **3.- Thats all!** > > Goog luck where i can put custom class in themler to a clumn div?

Last edited 10 October 2016 by Giuma

Support Team
Support Team posted this 10 October 2016

Hi,

You will need to edit the content as the HTML Source.

Sincerely,
Hella

Hi, You will need to edit the content as the HTML Source. Sincerely, Hella
You must log in or register to leave comments