Posts

Showing posts with the label Bootstrap 3

Bootstrap 3 Forms Tutorial

Image
Forms are essential for web applications, one can see them while logging in an application, editing a profile or registering for an account. Bootstrap greatly simplifies form styling by providing special style classes and providing automatic styling of form controls. To learn how to style forms and form controls we’ll discuss a registration form shown below. The code for this form as well as live demo could be seen on Bootsnipp. First things first, let’s review a basic form template. A form is placed in a .container for proper formatting. Then, in line 3 an HTML form tag is seen with a class .form-horizontal and a role form. The former is used to produce a form with labels, such as “Password” in the above image, that are on the same line as inputs, the latter is to describe meaning of the element, for example, an anchor tag can be styled to look like a button, in this case a role attribute tells that the anchor is used for playing a button’s role. After that, in line t...
Post a Comment
Read more

Understanding Bootstrap 3 Grids

Image
In a previous post Twitter Bootstrap essentials were discussed. Today we'll survey an important part of the framework called grid. Bootstrap grid is a structure which allows one to create page layouts. Grids can contain up to 12 columns in each row, if you place more than that, additional columns will be wrapped onto the next line. Moreover, each column can have a width of more than one, but the sum should be equal to 12 as is shown on the image below. For example, you could have 12 columns of width 1 or 6 columns of width 2 or 2 columns of width 6 or even 3 columns of widths 3, 6 and 3. It is important that the sum should be equal to 12. A snippet of code showing a basic grid structure is shown below. The grid, as well as all site content, should be wrapped in a div with a .container or .container-fluid class. Then everything that is to be placed into a grid should be divided into rows an the content of rows should be subdivided into columns. The only possibl...
Post a Comment
Read more

Getting started with Bootstrap 3

Image
Twitter Bootstrap is an extremely popular front-end framework designed to build websites and web applications. In fact, it is a collection of tools leveraging HTML, CSS and some optional Javascript extensions like dialogs or tooltips and is used to facilitate user interface creation. Its documentation can be found here .    The simplest way to start working with Bootstrap is to use a content delivery network or CDN which delivers all the necessary files via the Internet. To use it all that is necessary to do is to add a couple of links to your HTML file as will be discussed later. A code snippet adapted from Bootstrap Getting started guide is shown below. It is an HTML file. In this template the <!DOCTYPE html> declaration informs the browser that this page is authored using HTML5. The meta tag <meta charset="utf-8"> is used to instruct the browser to use utf-8 encoding. Then the X-UA-Compatible meta tag has something to do with Internet Explore...
Post a Comment
Read more