Skip to content
/ css Public

Easy-to-use css styles for responsive columns

Notifications You must be signed in to change notification settings

ersuman/css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 

Repository files navigation

css styles for responsive column

Hello world! :)
I've made this css styles for displaying responsive equal sized columns, which is specially used to display items in a grid view. These styles are very easy to use than bootstrap.

HOW TO USE ?

There are three styles classes are available:
1) .col-135i : this will present 1, 3, 5 items in a row for sm, md, lg sizes respectively
2) .col-246i : this will present 2, 4, 6 items in a row for sm, md, lg sizes respectively
3) .col-123456i : this will ... now you know what i meant to say :D

At first link this css file inside <head> tag as
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/ersuman/css/master/ResponsiveColumn.css" />

Then, you can use these classes as your html classes.

Html with angular example

<div ng-app="myApp">
    ...
    <div ng-repeat="item in lstItems">
        <div class="col-246i">
            {{item}}
            ...
        </div>
    </div>
 </div>

cshtml Razor example:

<div>
    @foreach (var m in Model)
    {
        <div class="col-135i">
            ...
        </div>
    }
</div>

Happy coding!

About

Easy-to-use css styles for responsive columns

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages