JQuery and Bootstrap 3

Saturday, January 18, 2014

File new project, empty asp.net web application

Add a folder and inside add an html file

Add a stylesheet to the folder

Add this styling to the stylesheet

Add this markup to the html page

Right click in the page and select view in browser

View a standard html page with no styling, the default

Download bootstrap 3 from the web site

Right click the project and select manage nuget packages

Search for bootstrap and install it

Bootstrap is installed, click close

Open the content folder and view bootstrap style sheets

Grab the bootstrap.min and drag it above the custom style sheet in the head section

Refresh the page and view that the only effect is that the labels are bold and a border around the button

Add a div and these classes to the name label and textbox

Now it looks more like bootstrap, since bootstrap is mobile first, it is responsive

Resize the window the texbox stay perfectly aligned, perfectly centered

Wrap all labels and textboxes in div form-group and add class form-control to the textboxes, remove the line breaks

Wrap the checkboxes in div with the class checkbox

Add a div with class radio around the radio buttons and btn btn-primary class to the submit button

Refresh the page, now the form is the default bootstrap form, a totally responsive from, well styled

Add these classes to the form, label and textbox for styling

Save the page and refresh the browser, view the result

Reduce the window horizontally, the texbox is positioned beneath the label

Wrap every group of elements in a div with this class

Refresh the page and view the styling with an offset of two

Reduce the window to smart phone size, view the vertical alignment

2 column layout, add a div and wrap the form tag in a div

Add this css with id identifiers

Refresh the page and view the result

Navigate to bootstrap site and click on javascript

Click on modal link

Copy this code, where the three dots are is where the form will be inserted

Paste the code into the body, paste the form into the div with the class modal-body

Add a reference to jquery and bootstrap js files in the head section

Hit the run button

Click the launch button

View the form in the modal dialog box

From the bootstrap home page navigate to the css section

Click on forms

Default Success Warning Important Info Inverse
B S W I ? O