Myself

Bootstrap-3 tutorial 12 – How to make a basic form

11:12 PM Admin 0 Comments

In this tutorial I’ll show you how to make a basic form in Bootstrap. By adding Bootstrap classes to your form, it will be responsive and also gain some neat and tidy styling.

Starting code for this tutorial

As with most of the other Bootstrap tutorials, I started with the same template that we created in tutorial 3. Inside of a container, a row and a div taking up 12 columns.

Creating a form

By creating a .form-group inside of the form tag, bootstrap will apply responsive styling and some nice neat padding between the label and the input element.


<form action="" method="">
 <div class="form-group">
 <!-- label here -->
 <!-- input here -->
 </div>
</form>

Email and password fields

Input elements also need to have a class of .form-control to add the Bootstrap theme styling, which makes it look a little better. This only needs to be applied to text, email or password fields.


<form action="" method="">
 <div class="form-group">
  <label for="email">Email Address</label>
  <input type="email" class="form-control" id="email"/>
 </div>
</form>

File uploads

File uploads should also be in the form group to apply the correct spacing and styling, however they do not need the.form-control class because that will apply a really funny looking border around it.


<div class="form-group">
 <label for="file-upload">File upload</label>
 <input type="file" id="file-upload"/>
</div>

Submit buttons

File uploads should also be in the form group to apply the correct spacing and styling, but no label is necessary here.


<div class="form-group">
 <input type="submit" class="btn btn-default" id="submit" value="submit" />
</div>

Final code for the tutorial

Here is the final form code for the tutorial.


<form action="" method="">
 <div class="form-group">
  <label for="email">Email Address</label>
  <input type="email" class="form-control" id="email"/>
 </div>
 <div class="form-group">
  <label for="password">Password</label>
  <input type="password" class="form-control" id="password"/>
 </div>
 <div class="form-group">
  <label for="file-upload">File upload</label>
  <input type="file" id="file-upload"/>
 </div>
 <div class="form-group">
  <input type="submit" class="btn btn-default" id="submit" value="submit" />
 </div>
</form>

bootstrap, css, tutorial

Bootstrap-3 tutorial 11 – Buttons with Bootstrap

11:10 PM Admin 0 Comments

bootstrap, css, tutorial

Bootstrap-3 tutorial 10 – Responsive images

10:57 PM Admin 0 Comments

bootstrap, css, tutorial

Bootstrap-3 tutorial 9 – Tables in Bootstrap

10:55 PM Admin 0 Comments

In this tutorial we’ll be taking a look at tables in Bootstrap. Bootstrap handles tables differently, in the way that it doesn’t apply any default styling. This is because there are many plugins/components that make use of tables and it would be really annoying if Bootstrap interfered with those.

Starting code for this tutorial

Since Bootstrap doesn’t apply any default styling to tables, I decided to start this tutorial off with the table below, inside of the basic template. For this tutorial, we’ll only be adding classes to the <table> and <tr> tags, so to simplify things, I kept anything within these tags hidden in the video above.


<div class="container">
  <div class="row">
    <div class="col-xs-12">
      
      <table>
        <tr>
          <th>#</th><th>First Name</th><th>Last Name</th><th>Percentage/Year Mark</th>
        </tr>
        <tr>
          <td>1</td><td>Sean</td><td>Pooley</td><td>92%</td>
        </tr>
        <tr>
          <td>2</td><td></td><td>Schwulst</td><td>88%</td>
        </tr>
        <tr>
          <td>3</td><td>Kyle</td><td>Beecham</td><td>86%</td>
        </tr>
      </table>

    </div>
  </div>
</div>

Adding styling to tables in Bootstrap

To add Bootstrap’s table styles to a table, all you have to do is simply add the .table class to the <table> element, and your table instantly looks a lot better.


<table class="table">

Striped tables

To add a darker background to alternating rows we can use the .table-striped class.


<table class="table table-striped">

Bordered tables

The .table-bordered class will add a border around the entire table.


<table class="table table-bordered">

Adding a hover effect

Adding the .table-hover class will add a hover effect to the table row that the mouse is currently hovering over.


<table class="table table-hover">

Condensed tables

Tables can also be condensed to take up less space with the .table-condensed class.


<table class="table table-condensed">

Using multiple classes

It’s also possible to apply multiple classes to the same table, so you can have a condensed striped table.


<table class="table table-condensed table-striped">

Styling rows

Table rows also have specific classes. The .active class can be used to mark an active row, and any one of the.danger.success.warning or .info contextual classes can be added to table rows to provide visual feedback to the user.


<tr class="active">
<tr class="success">

bootstrap, css, tutorial

Bootstrap-3 tutorial 8 – Typography

11:35 PM Admin 0 Comments

Bootstrap has some very usefully styled typography and a range of additional versatile typography classes that can come in handy when creating an easy to read web page.

Starting code for this tutorial

In this tutorial we’ll be starting with a simple container, row and column inside of the simple page template that we created in tutorial 3.


<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-push-8 bg-danger">
      <!-- your code here -->
    </div>
  </div>
</div>

Some basic typography

Headings, leading text and the small tag

All headings from <h1> to <h6> are available in Bootstrap. Of course you know exactly what heading tags do, so I won’t bore you with the details, but it is worth mentioning that we can place a <small> tag around text in our heading to create some secondary text. The same can be done with paragraphs to create fine print.


<h1>This is a header<small>Secondary text</small></h1>
<p><small>Terms and conditions or fine print</small></p>

Since we have the power to make paragraph text smaller, we can also make it bigger to create a leading paragraph. This is useful for the first paragraph on a page.


<p class="lead"> This is a leading paragraph </p>
<p> This is a normal paragraph </p>

You can read more about Bootstrap’s default heading styling here.

Highlighted text, striked through text and deleted text

You might want to highlight text to make it stand out. Bootstrap’s default styling for the <mark> tag does exactly that. The next to tags are a little tricky, because although they look the same visually, they have semantically different meanings.

The <del> tag means that text is removed or deleted from the document
The <s> tag means that the text within is no longer accurate or relevant


You can <mark>highlight</mark> text using the <mark>mark</mark> tag.
<del>Deleted text</del>
<s>Striked through text</s>

Aligning text

Bootstrap includes some alignment classes that let you easily align text to the left, right, center or even justify it.


<p class="text-left">Left aligned text.</p>
<p class="text-left">Centered text.</p>
<p class="text-left">Right aligned text.</p>
<p class="text-left">Justified aligned text.</p>

Transforming text

You can quickly transform upper case and lowercase text using Bootstraps .text-uppercase or .text-lowercase classes.


<p class="text-uppercase">this is uppercase</p>
<p class="text-lowercase">THIS IS LOWERCASE</p>

Blockquotes and reverse blockquotes

In html you can quote someone with a blockquote, but sometimes you might want to reverse that blockquote to display on the right hand side. Bootstrap takes care of this with a useful class.


<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. </p>
  <footer>Someone famous</footer>
</blockquote>
<blockquote class="blockquote-reverse">
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. </p>
  <footer>Someone famous</footer>
</blockquote>

bootstrap, css, tutorial

Bootstrap-3 tutorial 7 – Push and Pull

12:32 AM Admin 0 Comments

Sometimes you might want to change the order of columns on your website depending on screen size, this can be done using Bootstrap’s push and pull classes. A great example of this, is if you want an image to the right and text to the left on a desktop, but want to swap these around on a mobile device.

Starting code for this tutorial

Start by creating 2 column’s inside of your the basic template we made in tutorial 3. I’ve created a smaller 4 column div on the left, and a larger 8 column div to the right.


<div class="container">
  <div class="row">
    <div class="col-md-4 bg-danger">
      column 1
    </div>
    <div class="col-md-8 bg-success">  
      column 2
    </div>
  </div>
</div>

Changing column order with Push and Pull classes

We can change the order of these columns with Bootstraps Push and Pull classes, .col-md-pull-* or col-md-push-*. The “*” would be the number of columns to push or pull the column by.

To swap these columns around, we need to push our first div over by 8 columns by adding the class .col-md-push-8because the “column 2” is 8 columns in width. Then we need to pull “column 2” 4 columns to the left with .col-md-pull-4 to fill up the space left by column 1. This should evenly swap both columns on any medium sized devices or larger.


<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-push-8 bg-danger">
      column 1
    </div>
    <div class="col-md-8 col-md-pull-4 bg-success">  
      column 2
    </div>
  </div>
</div>

Creating a background image

As a practical example of where this could be used in the real world, I created a background image using custom CSS. This isn’t 100% related to Bootstrap but it demonstrates a good use for the push and pull method shown above.

Adding a custom CSS file

Start by linking a custom CSS file to your web page. I created a file called “main.css” which I added to my CSS folder along with all the other Bootstrap css files.


<!-- This is my CSS file -->
<link rel="stylesheet" href="css/main.css">

Create a custom background image class

After creating my css file, I added the following class to my CSS file.


.bg-cover{
    background:url(../images/your-image-name.ext);
    height:300px;
    background-size:cover;
}

Add the class to your column

Once the class was created, all I had to do was add it to the column where I wanted my image to be displayed. I also removed the Bootstrap background color contextual class.


<div class="col-md-4 col-md-push-8 bg-cover">

bootstrap, css, tutorial

Bootstrap-3 tutorial 6 – Nesting the Bootstrap grid

11:55 PM Admin 0 Comments

In this tutorial you will be “nesting the Bootstrap grid”. This is when you place 1 or more columns inside of another to make a grid within a grid.

Starting code for this tutorial

We’ll be starting with the code below, placed inside of the basic template that we created in tutorial number 3.


<div class="container">
  <div class="row">
    <div class="col-lg-12 bg-success">
      <p>This is an other div</p>
      <!-- your code here -->
    </div>
  </div>
</div>

Nesting the Bootstrap grid

To nest your content within the default grid, you simply add in a new .row, and a set of columns with any break point of your choice, the default Bootstrap behavior for normal columns will apply to all nested columns as well. I’ve chosen.col-lg-6 and nested it inside another column that has a class of .col-lg-12. This means that the parent column will take up the full width of the grid, while the child column should only take up half of it’s parent width.

Please note that I forgot to add the at the beginning of my video tutorial, but I added it in towards the end. Documentation on the Bootstrap site advises that this class should be used. This will get rid of the problem that I address in the last 2 minutes in the video above.


<div class="container">
  <div class="row">
    <div class="col-lg-12 bg-success">
      <p>This is an other div</p>

      <div class="row">
        <div class="col-lg-6 bg-primary">
          <p>This is an inner div</p>
        </div>
      </div>
      
    </div>
  </div>
</div>

An important note to remember is that a child column’s width is determined by the width of it’s parent, and not the width of main grid. This mean’s that if we change the width of the parent, the child column will be affected as well. You can see the example in the code below and refer to 3:10 in the video above for an example.


<div class="container">
  <div class="row">
    <div class="col-lg-6 bg-success">
      <p>This is an other div</p>

      <div class="row">
        <div class="col-lg-6 bg-primary">
          <p>This is an inner div</p>
        </div>
      </div>
      
    </div>
  </div>
</div>

bootstrap, css, tutorial

Bootstrap-3 tutorial 5 – Using the Bootstrap grid

11:38 PM Admin 0 Comments

In this tutorial we finally start using the Bootstrap grid. Now that you understand the concept behind the grid, and how it works, you can start creating columns and rows.

Creating a container

Generally, you will always use the bootstrap grid inside of a container that determines the max width of your website. Bootstrap has 2 containers available to use by default. A “container” with a max width and a “fluid container” which will always fit the width of the browser.

Creating a container

The Bootstrap container has a maximum width which is determined by each breakpoint, you can see more about thesegrid options here. This means that content will always be centered with white space on each side.


<div class="container">
      ...
</div>

Creating a fluid container

The fluid container will scale to fit the browser width, which is useful for creating full-width slideshows or rows with background images.


<div class="container-fluid">
      ...
</div>

Using the bootstrap grid

Once you have your container in place, the next step is to create a new row, and inside of that we can create our columns. You’ll notice my column is suffixed with a break point and a column size.


<div class="container">
  <div class="row">
    <div class="col-lg-1">
      ...
    </div>
  </div>
</div>

Making use of break points

Each column class is made out of 3 hyphenated parts. col-lg-1

col lets bootstrap know that we are using a column.

The next part, lg sets the break point for a certain size screen. This can be lg for large screens, md for medium screens,sm for small screens and xs is for extra small screens.

The final part is just a number and could be any number between 1 and 12. This determines how wide your column will be at each break point.

You’ll find that you might want to define a different column width for each break point. To do this you can simply add an extra class for each break point as demonstrated below. If no rule is defined for a break point, then Bootstrap will use the rule you defined for a smaller break point or it will default to stacking the columns.


<div class="container">
  <div class="row">
    <div class="col-lg-1 col-xs-4">
      ...
    </div>
  </div>
</div>

bootstrap, css, tutorial

Bootstrap-3 tutorial 4 – The Bootstrap grid explained

11:31 PM Admin 0 Comments

Newer Posts

Older Posts

Popular Posts

Contact Form

Starting code for this tutorial

Creating a form

Email and password fields

File uploads

Submit buttons

Final code for the tutorial

The 4 different ways to create buttons with Bootstrap

Buttons with contextual classes

Buttons sizes

Starting code for this tutorial?

Making a responsive images

Creating awesome image styles

Rounded corners

Circle images

Thumbnail images

Starting code for this tutorial

Adding styling to tables in Bootstrap

Striped tables

Bordered tables

Adding a hover effect

Condensed tables

Using multiple classes

Styling rows

Some basic typography

Headings, leading text and the small tag

Highlighted text, striked through text and deleted text

Aligning text

Transforming text

Blockquotes and reverse blockquotes

Starting code for this tutorial

Changing column order with Push and Pull classes

Creating a background image

Adding a custom CSS file

Create a custom background image class

Add the class to your column

Starting code for this tutorial

Nesting the Bootstrap grid

Creating a container

Creating a container

Creating a fluid container

Using the bootstrap grid

Making use of break points

The Bootstrap grid

Bootstrap break points

Useful resources

About me

Like us on Facebook