How make 5 column layout in portal page?

Nandan Raj
Kilo Contributor

Hi, I started using Service Portal recently. I want to create new layout for my page to fit to my requirements. I would like have new layout with 5 columns. Which should span to full width.

I tried some but they are leaving 2 columns margin. 

I want 5 columns to fill width as 12 columns.

Can you let me know where and how to get it?

Thanks

1 ACCEPTED SOLUTION

Hi Nandan,

I've got your need, so for do that you have to set your layout and customize the width though the CSS for each container.

If this will span the full width, you can overwrite this in the page specific CSS.

E.g. you can say that for displays which are more than 3000 pixels, you want the container width to be 2800:

@media (min-width: 3000px) {
.container{
      width:2800px;
}}

Have a look of this documentation, it will be very useful for understanding the concept of Default Bootstrap Big Grid.

Please, remember to mark Correct or Helpful if you find my response useful.

Cheers
Alberto

 

 

View solution in original post

5 REPLIES 5

Alberto Consonn
ServiceNow Employee
ServiceNow Employee

Hi Nandan,

have a look at this thread, it will help to fit your need:

https://community.servicenow.com/community?id=community_question&sys_id=b4e90729db5cdbc01dcaf3231f96...

Please, remember to mark Correct or Helpful if you find my response useful.

Cheers
Alberto

This solution is good, but 1 want equal sized column. Ex- 2 2 2 2 2 if possible .5 gap in between to make it 12.

Hi Nandan,

I've got your need, so for do that you have to set your layout and customize the width though the CSS for each container.

If this will span the full width, you can overwrite this in the page specific CSS.

E.g. you can say that for displays which are more than 3000 pixels, you want the container width to be 2800:

@media (min-width: 3000px) {
.container{
      width:2800px;
}}

Have a look of this documentation, it will be very useful for understanding the concept of Default Bootstrap Big Grid.

Please, remember to mark Correct or Helpful if you find my response useful.

Cheers
Alberto

 

 

Hi Nandan,

Any update on this?

Can you mark my answer as correct, helpful and hit like if you were able to achieve the requirement. This helps in removing this question from unanswered list and helps users to learn from your thread.

Thanks in advance.

Cheers
Alberto