HTML & CSS Archives - Dawid's Blog

How to evenly space many inline-block elements?

flex can help to space out images inline-block elements. (JS Fiddle)

Customise Semantic-UI

Semantic UI appears to be no longer under active development. However, thanks to the Open Source community it is still getting deveoped by under a different name - Fomantic UI. I never had the need customise Semantic-UI. I only ever used it within internal apps and it worked well. Recently, I decided to use it

The curious case of banner468

On one of my websites, I used a CSS class called "banner468". As the name suggests the original purpose of the class was to hold some ads. I used it for a different purpose. From one day to the next, the functionality contained within the banner468, disappeared. It got hidden. Originally, I thought, this had

Using Bootstrap tooltip on disabled buttons

I've been trying to get a tooltip on a disabled button in bootstrap. Well that didn't work. So here is the trick: overlay the disabled buttons with a div:

/** Tooltip doesn't want to work on the disabled buttons */
.tooltip-wrapper-sm {
    position:relative;
    z-index: 3;
    width:100%;
    height:30px;
}

1

2

3

4

5

6

7

/** Tooltip doesn't want to work on the disabled buttons */

.tooltip-wrapper-sm {

position:relative;

z-index: 3;

width:100%;

height:30px;

}

$('.tooltip-wrapper-sm').tooltip({
   placement : 'bottom'
});

1

2

3

$('.tooltip-wrapper-sm').tooltip({

placement : 'bottom'

});

<div class="pull-right">
    <div class="btn-group pull-right">
        <button class="btn btn-default btn-sm" disabled="disabled">Hello</button>
        <button type="button" class="btn btn-default btn-sm" disabled="disabled"><span class="caret"></span></button>
    </div>
    <div class="tooltip-wrapper-sm"></div>
    <div class="clear"></div>
</div>

1

2

3

4

5

6

7

8

<button class="btn btn-default btn-sm" disabled="disabled">Hello</button>

</div>

</div>

Here is the JSFiddle

What's the difference between col-md-x, col-xs-x, col-sm-x, col-lg-x?

Getting your head around the grid structure for Bootstrap can be challenging at times. But not to worry! We shall prevail! The grid in Bootstrap is divided into 12 chunks. In short, I'd like to think about this as a how big the column is depending on the screen size: col-xs-x - phone col-sm-x -

Bootstrap Tabs with Google Charts - how to make it work?

Today, I've encountered an interesting problem. It seems that when an object is hidden, it breaks the properties of width and height for Google Charts. Using Bootstrap 3.3, I had a set of tabs. Each tab contained a graph of some sort. In the initial tab, the chart was being displayed correctly. However, the charts

9 steps to make your website more accessible

Accessible Web The internet is an information medium based in 95% on visual transmission. It would seem therefore that it is virtually unusable for people unable to see. This, however, is not true. Indeed, we (the developers) can make browsing our sites a truly great experience by making it a more accessible. Here are the 9

Category: HTML & CSS

How to evenly space many inline-block elements?

Customise Semantic-UI

The curious case of banner468

Using Bootstrap tooltip on disabled buttons

What's the difference between col-md-x, col-xs-x, col-sm-x, col-lg-x?

Bootstrap Tabs with Google Charts - how to make it work?

9 steps to make your website more accessible

Search

Categories