asked on

CSS HELP

I am try to create a row with 5 columns layout and siaplay the content underneath of the columns , but it dies not work . I am suing bootstrap css.

<div class="form-group">
    <label class="control-label col-sm-2" for="status">Participants:</label>

    <div class="row" style="border: 1px solid red">
    	<div class="col-xs-12">
    		<cfoutput query="qGetParticipants" group="securityRoleNameTx">
        		<div class="header" class="col-xs-2 col-sm-offset-2">#securityRoleNameTx#</div>
                	 <div class="collapse">
                        		<cfoutput>
                                  <div>
                                      <p>
                                         <input type="checkbox" name="part" id="part" value="#userKey#" <cfif listFindNoCase(locParticiopants,userKey)>checked</cfif>> #trim(lastName)#, #trim(firstName)#
                                      </p>
                                  </div>
                                </cfoutput>
                    </div>
                </div>
            </cfoutput>

        </div>
    </div>
</div>

Open in new window

Julian Hansen

I am suing bootstrap css.

I hope you have a good lawyer.

To create additional layout options in bootstrap is fairly easy.

First create a name for them - and then just follow the Bootstrap convention

col-xs-5-1,
.col-sm-5-1,
.col-md-5-1,
.col-lg-5-1 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-5-1 {
    width: 20%;
    float: left;
}

Open in new window

Next you need to add the media queries

@media (min-width: 768px) {
	.col-sm-5-1 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-5-1 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-5-1 {
        width: 20%;
        float: left;
    }
}

Open in new window

If you need to have styles to span N columns of 5 then just add those to the above and change the width to N * 20%
Let's say you need a cell that takes up 2 columns of 5 - add the new style as follows

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

Open in new window

ASKER CERTIFIED SOLUTION

Marco Gasi

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

Here is a complete Bootstrap 5 column style sheet with push, pull, offset etc

.col-xs-5-1, .col-sm-5-1, .col-md-5-1, .col-lg-5-1, .col-xs-5-2, .col-sm-5-2, .col-md-5-2, .col-lg-5-2, .col-xs-5-3, .col-sm-5-3, .col-md-5-3, .col-lg-5-3, .col-xs-5-4, .col-sm-5-4, .col-md-5-4, .col-lg-5-4, .col-xs-5-5, .col-sm-5-5, .col-md-5, .col-lg-5-5 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-5-1, .col-xs-5-2, .col-xs-5-3, .col-xs-5-4, .col-xs-5-5 {
  float: left;
}
.col-xs-5-5 {
  width: 100%;
}
.col-xs-5-4 {
  width: 80%;
}
.col-xs-5-3 {
  width: 60%;
}
.col-xs-5-2 {
  width: 40%;
}
.col-xs-5-1 {
  width: 20%;
}
.col-xs-pull-5-5 {
  right: 100%;
}
.col-xs-pull-5-4 {
  right: 80%;
}
.col-xs-pull-5-3 {
  right: 60%;
}
.col-xs-pull-5-2 {
  right: 40%;
}
.col-xs-pull-5-1 {
  right: 20%;
}
.col-xs-pull-5-0 {
  right: auto;
}
.col-xs-push-5-5 {
  left: 100%;
}
.col-xs-push-5-4 {
  left: 80%;
}
.col-xs-push-5-3 {
  left: 60%;
}
.col-xs-push-5-2 {
  left: 40%;
}
.col-xs-push-5-1 {
  left: 20%;
}
.col-xs-push-5-0 {
  left: auto;
}
.col-xs-offset-5-5 {
  margin-left: 100%;
}
.col-xs-offset-5-4 {
  margin-left: 80%;
}
.col-xs-offset-5-3 {
  margin-left: 60%;
}
.col-xs-offset-5-2 {
  margin-left: 40%;
}
.col-xs-offset-5-1 {
  margin-left: 20%;
}
.col-xs-offset-5-0 {
  margin-left: 0;
}
@media (min-width: 768px) {
  .col-sm-5-1, .col-sm-5-2, .col-sm-5-3, .col-sm-5-4, .col-sm-5-5 {
    float: left;
  }
  .col-sm-5-5 {
    width: 100%;
  }
  .col-sm-5-4 {
    width: 80%;
  }
  .col-sm-5-3 {
    width: 60%;
  }
  .col-sm-5-2 {
    width: 40%;
  }
  .col-sm-5-1 {
    width: 20%;
  }
  .col-sm-pull-5-5 {
    right: 100%;
  }
  .col-sm-pull-5-4 {
    right: 80%;
  }
  .col-sm-pull-5-3 {
    right: 60%;
  }
  .col-sm-pull-5-2 {
    right: 40%;
  }
  .col-sm-pull-5-1 {
    right: 20%;
  }
  .col-sm-pull-5-0 {
    right: auto;
  }
  .col-sm-push-5-5 {
    left: 100%;
  }
  .col-sm-push-5-4 {
    left: 80%;
  }
  .col-sm-push-5-3 {
    left: 60%;
  }
  .col-sm-push-5-2 {
    left: 40%;
  }
  .col-sm-push-5-1 {
    left: 20%;
  }
  .col-sm-push-5-0 {
    left: auto;
  }
  .col-sm-offset-5-5 {
    margin-left: 100%;
  }
  .col-sm-offset-5-4 {
    margin-left: 80%;
  }
  .col-sm-offset-5-3 {
    margin-left: 60%;
  }
  .col-sm-offset-5-2 {
    margin-left: 40%;
  }
  .col-sm-offset-5-1 {
    margin-left: 20%;
  }
  .col-sm-offset-5-0 {
    margin-left: 0;
  }
}
@media (min-width: 992px) {
  .col-md-5-1, .col-md-5-2, .col-md-5-3, .col-md-5-4, .col-md-5-5 {
    float: left;
  }
  .col-md-5-5 {
    width: 100%;
  }
  .col-md-5-4 {
    width: 80%;
  }
  .col-md-5-3 {
    width: 60%;
  }
  .col-md-5-2 {
    width: 40%;
  }
  .col-md-5-1 {
    width: 20%;
  }
  .col-md-pull-5-5 {
    right: 100%;
  }
  .col-md-pull-5-4 {
    right: 80%;
  }
  .col-md-pull-5-3 {
    right: 60%;
  }
  .col-md-pull-5-2 {
    right: 40%;
  }
  .col-md-pull-5-1 {
    right: 20%;
  }
  .col-md-pull-5-0 {
    right: auto;
  }
  .col-md-push-5-5 {
    left: 100%;
  }
  .col-md-push-5-4 {
    left: 80%;
  }
  .col-md-push-5-3 {
    left: 60%;
  }
  .col-md-push-5-2 {
    left: 40%;
  }
  .col-md-push-5-1 {
    left: 20%;
  }
  .col-md-push-5-0 {
    left: auto;
  }
  .col-md-offset-5-5 {
    margin-left: 100%;
  }
  .col-md-offset-5-4 {
    margin-left: 80%;
  }
  .col-md-offset-5-3 {
    margin-left: 60%;
  }
  .col-md-offset-5-2 {
    margin-left: 40%;
  }
  .col-md-offset-5-1 {
    margin-left: 20%;
  }
  .col-md-offset-5-0 {
    margin-left: 0;
  }
}
@media (min-width: 1200px) {
  .col-lg-5-1, .col-lg-5-2, .col-lg-5-3, .col-lg-5-4, .col-lg-5-5 {
    float: left;
  }
  .col-lg-5-5 {
    width: 100%;
  }
  .col-lg-5-4 {
    width: 80%;
  }
  .col-lg-5-3 {
    width: 60%;
  }
  .col-lg-5-2 {
    width: 40%;
  }
  .col-lg-5-1 {
    width: 20%;
  }
  .col-lg-pull-5-5 {
    right: 100%;
  }
  .col-lg-pull-5-4 {
    right: 80%;
  }
  .col-lg-pull-5-3 {
    right: 60%;
  }
  .col-lg-pull-5-2 {
    right: 40%;
  }
  .col-lg-pull-5-1 {
    right: 20%;
  }
  .col-lg-pull-5-0 {
    right: auto;
  }
  .col-lg-push-5-5 {
    left: 100%;
  }
  .col-lg-push-5-4 {
    left: 80%;
  }
  .col-lg-push-5-3 {
    left: 60%;
  }
  .col-lg-push-5-2 {
    left: 40%;
  }
  .col-lg-push-5-1 {
    left: 20%;
  }
  .col-lg-push-5-0 {
    left: auto;
  }
  .col-lg-offset-5-5 {
    margin-left: 100%;
  }
  .col-lg-offset-5-4 {
    margin-left: 80%;
  }
  .col-lg-offset-5-3 {
    margin-left: 60%;
  }
  .col-lg-offset-5-2 {
    margin-left: 40%;
  }
  .col-lg-offset-5-1 {
    margin-left: 20%;
  }
  .col-lg-offset-5-0 {
    margin-left: 0;
  }
}

Open in new window

Working sample here

erikTsomik

ASKER

Julian Hansen. What I need is 5 column layout and the test tahtt will be shown underneath of each column. Sort of table layout

erikTsomik

ASKER

Marco Gasi. The reason I am using 2 cfoutput is that I am groupoing the result for the output. So the first cfoutput gives the headers, and the second outputing the columns content

Julian Hansen

What I need is 5 column layout and the test tahtt will be shown underneath of each column. Sort of table layout

And how does my solution not provide this?
Marco's solution will work but leaves a gutter - the styles posted above allow you to have a fully functional Bootstrap column class that works on 5 columns instead of 12?

EDIT: Sample on how to do this here