Konda.eu

Tag Archives: html

No comments

Styling HTML checkboxes only with CSS

These days' web designs are usually more important than functionality or content itself and It's a real nightmare for every developer to realize dreams of designers. Those usually involve some super fancy styling over checkboxes, radio buttons or other input types which style can't be overridden because it's locked by browser.

Fortunately to keep functionality of one, they don't need to be styled, they can be easily faked with some HTML and CSS.

Continue reading

No comments

Taming Bootstrap 3 - Columns Same Height

During my recent work on a web design layout with bootstrap, I came across a layout that required all bootstrap columns to be the same height. After some experimenting with various positions such as absolute inside relative etc. and none of them working as they should, I ended up using display: flex and wrapped it in a snippet as bellow.

@media (min-width: 992px) {
    .row-eq-height, .row-eq-height > div[class*='col-'] {
        display: -webkit-flex;
        display: flex;
        flex:1 1 auto;
    }
}

Usage example and demo are shown here:

<div class="container">
    <div class="row row-eq-height">
        <div class="col-sm-4 col-1" style="background: red">
            Some Text
        </div>
        <div class="col-sm-4 col2" style="background: green"></div>
        <div class="col-sm-4 col3" style="background: blue"></div>
    </div>
</div>