How to override the width of columns more than 5 in a single row

Hi,

We use Bootstrap that uses 12-columns grid. And that does not give you a possibility to create 5 equal columns as you cannot divide 12 into 5. You can try some solutions from the internet like this one:
https://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap

Sincerely,
Hella

Hello Hella,

I tried the following code of CSS and i am able to get the results. But, i dont know how long it support in all my design.. I think it should support in responsive mobile too. Need your support on this script please.

We override the css code based on the section id #section4a so that i will not effect other section or columns width.

    @media (min-width: 768px)
{
#section4a .col-sm-3 {
    width: 20% !important;
}

#section4a .col-sm-12 {
    width: 20%;
}

}

Kindly find the screenshot of the design attached.

Need your suggestion on the same,

We publish the website, URL - http://demo.nobledispensary.com/ Kindly check the demo link for your understanding. Need your support whether its fool proof or not ?

Regards
Suffian Ahmed

Hi,

Unfortunately I do not quite understand what exactly assistance you need.
This media quest applies the style inside in to all screen resolution with width 768 and up:

@media (min-width: 768px){}

With different media queries you can apply different widths to columns in different responsive modes.

Thank you,
Olivia

Dear Olivia,

I have added @media width and set the section id with width 20% each for added 5 columns.

1) I am able to addd 5 columns, i just added the script and i am able to get it 5 columns in single row with width: 20%. ???

2) Is that solution you are speaking about or is there any other alternative way to acheive it. Why that solumns width is not allowing custom percentage value in drop down. ???

3) Is that way can we override the width as you said. ? I mean bootstrap way https://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap

4) Is there any way to make more than 4 columns as a part of settings in Themler Tool ? Why its so hard to implement in your tool, not now maybe in future addons or minor releases... ?

Find the screenshot of the same and demo link to view it.

Regards
Suffian Ahmed

Hi,

As said previously, we are using Bootstrap framework. The framework gives us the 12-columns grid. That means that the whole sheet width is divided into 12 equal pieces. Taking several of those pieces you can control the width а the column. You cannot divide 12 columns into 5 similar pieces, that's why you cannot use the custom percent values in Themler. The solution I have posted from stackoverflow is a custom solution created by other users of Bootstrap that do have similar problems.
Maybe in the future we'll abandon Bootstrap framework and working with columns will become easier.

Sincerely,
Hella

Hi Hella,

Appreciate your quick reply.

Ok, thanks for your explanation. We are hoping the best possible solutions regarding columns width without Bootstrap frame soon in the coming releases.

1) One more point, can we add the section id or some id to the columns so that we can apply css class into it dynamically ? Is there any other way to override the code in Bootstrap etc ???

2) Animatoin - I like to add some animation to the non html control like button, columns etc for mouse hover in & out css class. Which is not possilbe because it not having any id since Themler tool allowing ID's for section only. I need to set animation css mouse hover in & out for columns, text, headers, buttons etc. Is there any way to acheive it by overriding the same using css or jquery. ???

3) Animation has only Hover, Load, Slide In, Slide Out etc.. What we are expecting one more split up on Hover

Hover - > A) Hover In (Mouse Hover In) & B) Hover Out (Mouse Hover Out) which sets 2 types of different animation to mouse hoverin & hoverout. Is that possible in next upcoming functionality.

4) Same for slider animations too, we have only 4 to 5 animations. Kindly check the www.wowslider.com where you can see hell lots of different kinds of animation which customers/end users demands much more. Please kindly do care of this too. Consider this as humble request ;-)

Waiting for your valuable quick reply.

Thanks & Regards
Suffian Ahmed

Last edited 19 October 2017 by Web IT Solutions LLP

Hi,

If you have the columns control inside the section, you can use that section id in the CSS code hierarchy to assign the code to that section columns only.

As for the animations. I have seen your other requests and your suggestion is in the wish list.

Sincerely,
Hella

You mean we can assign the css class dynamically under section of perticular column. I want to assign that perticular css class for one column and other for second column. Is that possible, if yes then please share the sapmle links for our better understanding.

For example, section Id -> colimn 1 & column 2. Can we apply class 1 for column 1 and class 2 for column 2 under same section id. Is that achievable, if yes kindly don't needed by providing some sample help.

And, regarding the animations can you share the wish list of all under progress so that we can check it for our understanding and satisfaction.

Regards
Suffian Ahmed

Hi,

In case you need different styling for different columns, there is no option to add the unique class in Themler, but you can use the nth-child CSS pseudo-class like described in this article:
https://www.w3schools.com/cssref/sel_nth-child.asp

Sincerely,
Hella

Dear Hella,

Thanks. Can we assign the id dynamically to any control at the time of run.

I mean using jQuery and JavaScript we can assign the dynamic id to html controls or Themler Controls. So that I can set css dynamically to the respective IDs of the controls.

Please kindly share the link or sample online foe our knowledge. Appreciate your help.

Thanks in advance,

Regards
Suffian Ahmed

Last edited 21 October 2017 by Web IT Solutions LLP

Hi,

We do not have such documentation and also do not provide support for such custom modifications. You can investigate this option and try to use the code you have to add the desired CSS code dynamically.

Sincerely,
Hella

Hi Hella,

Ok, appreciate your support ;-)

Will communicate to you if found any third party solutions regarding the same.

Regards
Suffian Ahmed

Hi Hella,

We doing some online solutions,

https://stackoverflow.com/questions/4299127/how-to-add-an-id-attribute-to-a-html-tag-with-a-certain-class-using-jquery

Hope this fixes my request.

Regards
Suffian Ahmed

Hi,

Hope that helps.

Sincerely,
Hella

Dear Hella/Olivia,

We are able to successed in generating dynamic id using jquery.

Check the section - UNANI TREATMENT CONCEPT in our demo website link - http://demo.nobledispensary.com/home.html

We have added two dynamic id's - id="your-id-value1" & id="your-id-value2" and also added multiple animation class to the html control...

Sample Code below,

#your-id-value1:hover h3
{
    color: #ffffff !Important;
}


#your-id-value1 h3:hover
{
    color: yellow !Important;
}


#your-id-value2:hover h3
{
    color: #ffffff !Important;


}


#your-id-value2 h3:hover
{
    color: yellow !Important;


}

And

<link href="http://ianlunn.github.io/Hover/css/hover.css" rel="stylesheet" media="all">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>


<script>


  $('.bd-layoutcolumn-26').parent().addClass('hvr-underline-from-center');
  $('.bd-layoutcolumn-28').parent().addClass('hvr-underline-from-center');
  $('.bd-layoutcolumn-30').parent().addClass('hvr-underline-from-center');
  $('.bd-layoutcolumn-34').parent().addClass('hvr-underline-from-center');
  $('.bd-layoutcolumn-6').parent().addClass('hvr-underline-from-center');


  $('.bd-layoutcolumn-155').parent().addClass('hvr-bounce-to-bottom');
  $('.bd-layoutcolumn-155').parent().addClass('hvr-wobble-bottom');


  $('.bd-layoutcolumn-158').parent().addClass('hvr-bounce-to-bottom');
  $('.bd-layoutcolumn-158').parent().addClass('hvr-wobble-bottom');


  $('div.bd-layoutcolumn-155').attr('id', 'your-id-value1');
  $('div.bd-layoutcolumn-158').attr('id', 'your-id-value2');


</script>

After adding the ids to the section/columns we dynamically applying colors to the text (h3) on hover against respective ids and on mouse hover some animations to the css class dynamically using third party hover animation.

Sample screenshot of that dynamic ids section is attached for your reference.

Thanks for support on this. I hope using Themler & your support we can acheive any kind of dynamic animations.

Appreciate your help & valuable time. Expecting your quick valuable reply.

Regards
Suffian Ahmed

Hi,

Sounds great, nice to hear that you have implemented this solution. I;ll keep this case opened so maybe other users will use your method in case they need something similar.

Sincerely,
Hella

Dear Hella,

Sounds great... Thank you.

Regards
Suffian Ahmed