twitter bootstrap modal popup, customized size and centralized location.

When I try to make bootstrap modal wider than the default. It is not centralized anymore, here we need to modify the css to adjust the left margin to the right px. Here is a block of handy code to adjust the modal width by a certain percentage of document width and adjust the left margin to centralize the modal as well.

        backdrop: true,
        keyboard: true
       'width': function () { 
           return ($(document).width() * .9) + 'px';  
       'margin-left': function () { 
           return -($(this).width() / 2); 

Adding a hyphen to the html attribute using html helpers, MVC3

The “data-*” is the custom data attributes in HTML5, it gives the ability to embed custom data attributes on all HTML elements and allows javascript to create a richer, more engaging user experience.  You can learn more about the usage of this “data-*” from here

I experience a problem of adding “data-*” to html tags by using the html helpers. I am using a datepicker from bootstrap and in the input tag, it specifies the “data-datepicker”.

<input id="SelectedDate" name = "SelectedDate" data-datepicker="datepicker" class="small" type="date" />

When I convert the html input tag to Html.TextBox helper class. It won’t pass the validation of razor engine’s syntax.

@Html.TextBoxFor(p=>p.SelectedDate, new {@class="small", type="date", data-datepicker = "datepicker"})

To work around this, you need to create a strongly typed Dictionary<string, object> and pass it to the Html.TextBox html attributes.

@Html.TextBoxFor(p => p.SelectedDate, new Dictionary<string, object> { { "class", "small" }, { "type", "date" }, { "data-datepicker", "datepicker" } })

This resolves the issue of having “data-*” custom data attributes while using mvc razor engine views.

CSS trick to place div in centre

For fix and relative positioned divs, if you already know the width or height. You can place them easily in centre horizontally or vertically.

For example, you have a div with width 400px.

<div style="width:400px;">


To place it in the centre of it parent div, you can set the left:50% and margin-left:-200px;

<div style="width:400px;position:relative;left:50%;margin-left:-200px;">


Set it left 50% of the parent div’s size, and then set its left margin to half size of its width. Make sure your position is relative or fixed. It will sit in the centre of your page.

It also works for vertical divs, set top 50% and top margin to its half size of the height. E.g.

<div style="height:400px;position:relative;top:50%;margin-top:-200px;">