Addon for using gravity forms with a bootstrap based development such as the roots.io theme for WordPress. I specifically wrote this for a roots theme and it's based on this post http://roots.io/style-gravity-forms-with-bootstrap/ by Ben Word.This goes one step further and provides support for some native gravity forms style declarations for for…

gravityforms-bs-datepicker.less

/**
 * Borrowed from https://github.com/addyosmani/jquery-ui-bootstrap
 * Styles the datepicker popup for gravityforms used with bootstrap
 */
/*
 * jQuery UI Datepicker 
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Datepicker#theming
 */
.ui-datepicker { 
    width: 17em; 
    padding: .2em .2em 0; 
    display: none;
    background-color: darken(@body-bg, 10%);

    .ui-datepicker-header { 
        position:relative; 
        padding:.2em 0; 
        border:0px;
        font-weight: bold;
        width: 100%;
        padding: 4px 0;
        background-color: @body-bg;
        color: @text-color;
    }
    .ui-datepicker-prev,
    .ui-datepicker-next { 
        position:absolute; 
        top: 2px; 
        width: 1.8em; 
        height: 1.8em; 
    }

    .ui-datepicker-prev-hover,
    .ui-datepicker-next-hover { 
        /*top: 1px;*/ 
    }
    .ui-datepicker-prev { left:2px; }
    .ui-datepicker-next { right:2px; }

    .ui-datepicker-prev-hover { /*left:1px;*/ }
    .ui-datepicker-next-hover { /*right:1px;*/ }

    .ui-datepicker-prev span, 
    .ui-datepicker-next span { 
        display: block;
        font-size: 11px;
        margin-top: -7px;
        position: absolute;
        top: 50%;
        &:hover {
            cursor: pointer;
        }
    }
    .ui-datepicker-title {
        margin: 0 2.3em;
        line-height: 1.8em;
        text-align: center;
        select { 
            font-size:1em; 
            margin:1px 0; 
        }
    }
    select.ui-datepicker-month-year {
        width: 100%;
    }
    select.ui-datepicker-month, select.ui-datepicker-year {
        width: 49%;
    }
    table {
        width: 100%; 
        font-size: .9em; 
        border-collapse: collapse; 
        margin:0 0 .4em; 
    }
    th { 
        padding: .7em .3em; 
        text-align: center; 
        font-weight: bold; 
        border: 0;  
    }
    td {
        border: 0; 
        padding: 1px; 
        span, a { 
            display: block; 
            padding: .2em; 
            text-align: right; 
            text-decoration: none; 
        }
    }
    .ui-datepicker-buttonpane { 
        background-image: none; 
        margin: .7em 0 0 0; 
        padding:0 .2em; 
        border-left: 0; 
        border-right: 0; 
        border-bottom: 0; 
        button { 
            float: right; 
            margin: .5em .2em .4em; 
            cursor: pointer; 
            padding: .2em .6em .3em .6em; 
            width:auto; 
            overflow:visible;
            .ui-datepicker-current {
                float:left; 
            }
        }
    }
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { 
    width:95%; 
    margin:0 auto .4em; 
}
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { 
    clear:both; 
    width:100%; 
    font-size:0em; 
}

/* RTL support */
.ui-datepicker-rtl {
    direction: rtl;
    .ui-datepicker-prev { 
        right: 2px; 
        left: auto;
        &:hover {
            right: 1px; 
            left: auto; 
        }
    }
    .ui-datepicker-next { 
        left: 2px; 
        right: auto;
        &:hover {
            left: 1px; 
            right: auto;
        }
    }
    .ui-datepicker-buttonpane {
        clear:right; 
        button {
            float: left;
            .ui-datepicker-current {
                float:right;
            }
        }
    }
    .ui-datepicker-group {
        float:right;
    }
    .ui-datepicker-group-last .ui-datepicker-header { 
        border-right-width:0; 
        border-left-width:1px; 
    }
    .ui-datepicker-group-middle .ui-datepicker-header { 
        border-right-width:0; 
        border-left-width:1px; 
    }
}

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    display: none; /*sorry for IE5*/
    //display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}

.ui-datepicker th {
    font-weight: bold;
    color: gray;
}

.ui-datepicker-today {
    a {
        background-color: @link-color;
        cursor: pointer;
        padding: 0 4px;
        margin-bottom:0px;
        &:hover {
            background-color: @gray;
            color: @gray-lighter;
        }
    }
}


.ui-datepicker td {
    a {
        margin-bottom:0px;
        border:0px;
    }

    &:hover {
        color:@gray-lighter;
    }

    .ui-state-default {
        border: 0;
        background:none;
        margin-bottom: 0;
        padding: 5px;
        color: gray;
        text-align: center;
        filter: none;
        &:hover {
            background:@link-color;
            color:@gray-lighter;
            border-radius: 4px;
        }
    }
    
    .ui-state-highlight {
        color: #404040;
        background: #eedc94;
        #gradient > .vertical (#fceec1, #eedc94);
        // .ui-reset-filter();
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
        border-color: #eedc94 #eedc94 #e4c652;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        border-radius: 4px;
    }
    
    .ui-state-active {
        background:@gray-light;
        margin-bottom:0px;
        font-size:normal;
        text-shadow: 0px;
        color:@gray-lighter;  
        border-radius: 4px;
    }
}

gravityforms.less

/**
 * LESS CSS file for using default gravity forms css classes with bootstrap 3
 * Inspired and started by Ben Word - http://roots.io/style-gravity-forms-with-bootstrap/
 * 
 * Copyright: 2014, CorradoMatt
 * License: GPLv2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

.gform_wrapper {
   ul {
		.list-unstyled();
	}
	li {
		.form-group();
	}

	form {
		margin-bottom: 0;
	}
	
	label {
		font-weight: normal;
	}
	.gfield {
		.make-md-column(12);
	}
	.top_label .gfield_label {
		font-weight: bold;
	}
	.gsection {
		border-bottom: 1px dotted #CCCCCC;
		margin: 16px 0;
		padding: 0 0 8px;
		.clearfix();
	}
	
	ul.gfield_radio, ul.gfield_checkbox {
		li {
			margin-bottom: 0;
		}

		li input[type="radio"]:checked + label, li input[type="checkbox"]:checked + label {
			font-weight: bold;
		}      
	}

	.gfield_required {
		padding-left: 1px;
		color: @state-danger-text;
	}

	.field_name_first input, .ginput_complex .ginput_left input {
		width: 100%;
	}
	.ginput_complex .ginput_right input {
		width: 99%;
	}
	.datepicker.datepicker_with_icon.hasDatepicker {
		display: inline-block;
		margin-right: 2%;
		width: 90%;
	}

	.ginput_complex label,
	.gfield_time_hour label,
	.gfield_time_minute label,
	.gfield_date_month label,
	.gfield_date_day label,
	.gfield_date_year label,
	.instruction {
		display: block;
		font-size: @font-size-small;
		margin: 3px;
	}
	
	/**
	 * Gravity Forms CSS Selector Columns
	 */
	// Builds a half column for .gf_left_half, .gf_right_half, .ginput_left and .ginput_right
	li.gfield.gf_left_half, li.gfield.gf_right_half, .ginput_complex .ginput_left, .ginput_complex .ginput_right {
		.make-md-column(6);
	}

	// Builds a 1 quarter column for .gf_one_quarter
	li.gfield.gf_one_quarter {
		.make-md-column(3);
	}

	// Builds a 3 quarter column for .gf_three_quarter
	li.gfield.gf_three_quarter {
		.make-md-column(9);
	}

	// Builds a 1 third column for .gf_left_third, .gf_middle_third, .gf_right_third
	li.gfield.gf_left_third, li.gfield.gf_middle_third, li.gfield.gf_right_third {
		.make-md-column(4);
	}

	// 2 column lists for radio and checkboxes
	li.gfield.gf_list_2col ul.gfield_checkbox li, li.gfield.gf_list_2col ul.gfield_radio li {
		margin: 0;
		min-height: 1.8em;
		.make-md-column(6);

		// without converting to inline block display the list will be in 1 column on smaller displays
		@media (max-width: @screen-md) {
			display: inline-block;
		}
	}

	// 3 column lists for radio and checkboxes
	li.gfield.gf_list_3col ul.gfield_checkbox li, li.gfield.gf_list_3col ul.gfield_radio li {
		margin: 0;
		min-height: 1.8em;
		.make-md-column(4);

		// without converting to inline block display the list will be in 1 column on smaller displays
		@media (max-width: @screen-md) {
			display: inline-block;
		}
	}
	
	// 4 column lists for radio and checkboxes
	li.gfield.gf_list_4col ul.gfield_checkbox li, li.gfield.gf_list_4col ul.gfield_radio li {
		margin: 0;
		min-height: 1.8em;
		.make-md-column(3);

		// without converting to inline block display the list will be in 1 column on smaller displays
		@media (max-width: @screen-md) {
			display: inline-block;
		}
	}

	// Complex columns fix
	.ginput_complex .ginput_left {
		padding-left: 0;
	}
	.ginput_complex .ginput_right {
		padding-right: 0;
	}

	// .gf_inline
	li.gfield.gf_inline {
		display: inline-block;
		float: none;
		vertical-align: top;
		width: auto;
	}

	// Improves UX and layout for checkboxes and radio buttons
	.gfield_checkbox li input[type="checkbox"], .gfield_radio li input[type="radio"], .gfield_checkbox li input {
		float: left;
		margin-top: 7px;
		height: 20px;
		&:hover {
			cursor: pointer;
		}
	}

	// Improves UX and layout for labels of checkboxes and radio buttons
	.gfield_checkbox li label, .gfield_radio li label {
		display: inline-block;
		line-height: 1.5;
		margin: 2px 0 0 10px;
		padding: 0;
		vertical-align: top;
		width: auto;
		&:hover {
			cursor: pointer;
		}
	}

	// Creates layout for lists with .gf_list_inline
	li.gf_list_inline ul.gfield_checkbox li, li.gf_list_inline ul.gfield_radio li {
		display: inline-block;
		margin: 0 10px 10px 0;
	}

	.ginput_container {
		// Applies standard bootstrap styles to form elements
		input, select, textarea {
			.form-control();
		}
		// fix for bootstrap standard of 100% width for checkboxes and radio buttons
		input[type='checkbox'], input[type='radio'] {
			width: auto;
		}
		textarea {
			height: auto;
		}
		.ui-datepicker-trigger {
			width: auto;
		}
	}

	// Form button styles
	.gform_button {
		.btn();
		.btn-primary();
		.btn-lg();
		height: auto;
		width: auto;
	}

	// Validation error styles
	.gform_wrapper .gfield_error {
		.gfield_label {
			color: @state-danger-text;
		}
		input,
		select,
		textarea {
			border-color: @alert-danger-border;
			background-color: @alert-danger-bg;
			color: @alert-danger-text;
			.form-control-focus(@alert-danger-text);
		}
	}

	// More validation error styles
	.gfield_error,
	.validation_error {
		.alert();
		.alert-danger();
	}

	// Confirmation message after form submit styling
	#gforms_confirmation_message {
		.alert();
	}

	.gf_scroll_text {
		overflow: auto;
		height: 180px;
	}
}

Wonderful! Thanks for the datepicker less! <3

Thanks, very helpful.