5 couloms in one row

Hi webcompanysale,

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

Follow my post, good luck

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

how i do it with css?

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

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

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.

i use themler...

i just need like this

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?

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

Hi,

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

Sincerely,
Hella