Bootstrap Tutorial

Bootstrap:
Bootstrap is a free collection of tools for creating websites and web applications in responsive web design using this css framework which supports mobiles,tablets and desktops.

Note: Before you include bootstrap.min.js, you should even include jquery. Without jquery bootstrap wont work as many of components of bootstrap are dependent on jquery. Hence have like below for sure..

<script src=”bootstrap/js/jquery-1.11.1.min.js”></script>
<script src=”bootstrap/js/bootstrap.min.js”></script>

Mandatory add meta tag for viewport which enables support for mobiles and tablets. Like <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>.

Wanna see the difference between responsive and non responsive design??

Just open the two following links in different tabs first..

1. http://getbootstrap.com/examples/non-responsive/

2. http://livedemo00.template-help.com/wt_51334/index.html

Now click restore down as shown below..

26-09-2014 11-07-41

Now drag it to left and right to see the difference between responsive and non responsive websites.

26-09-2014 11-09-13

Use .container for a responsive fixed width container.Use .container-fluid for a full width container, spanning the entire width of your viewport.

Creating layouts:

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the Bootstrap grid system works:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
Extra small devicesPhones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12

26-09-2014 11-19-37

From the above image i hope you can understand that default page width/container will be divided in to 12 cols. We can either use col-xs/col-sm/col-md/col-lg to divide columns. Here we consider col-md in dividing. If we want 12 cols in a row, you should have class row where inside you shud have col-md-1 for 12 times. Similarly if you need 3 cols have col-md-4,for 2 cols have col-md-6 and 1 column col-md-12.

Eg:

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

If you want to have this grid options for all mobiles,tablets and desktops..

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

With the four tiers of grids available you’re bound to run into issues where, at certain breakpoints, your columns don’t clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix

26-09-2014 12-16-09

For the above image if we use clearfix all column grid heights will be appeared to be same.

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

26-09-2014 12-20-20

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
26-09-2014 12-22-16

Body copy

Bootstrap’s global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Lead body copy

Make a paragraph stand out by adding .lead.

Inline text elements

For highlighting a run of text due to its relevance in another context, use the <mark> tag. – Market text

For indicating blocks of text that have been deleted use the <del> tag. – Deleted text

For indicating blocks of text that are no longer relevant use the <s> tag. – Strikethrough text

For indicating additions to the document use the <ins> tag. – Inserted text

To underline text use the <u> tag. – Underline text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

For emphasizing a snippet of text with a heavier font-weight. <strong>tag for bold

For emphasizing a snippet of text with italics. <em> for italics

Alignments of text:

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Tables: For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

<table class="table">
  ...
</table>
Use .table-striped to add zebra-striping to any table row within the <tbody>.
<table class="table table-striped">
  ...
</table>

Add .table-bordered for borders on all sides of the table and cells.

Add .table-hover to enable a hover state on table rows within a <tbody>.

Add .table-condensed to make tables more compact by cutting cell padding in half.

.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action

success-green,info-blue,warning-orange,danger-red

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Forms

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with.form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Add .form-inline to your <form> for left-aligned and inline-block controls.

<input type="text" class="form-control" placeholder="Text input">
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>

Difference between disabled and readonly: 26-09-2014 12-44-39

<button type="button" class="btn btn-default">Default</button>
btn btn-success,
btn btn-info,
btn btn-warning,
btn btn-danger

Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

<img src="..." class="img-responsive" alt="Responsive image">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Components

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

Twitter bootstrap loading button

Guys,

Have problem with loading button in twitter bootstrap??

Is the below image is not working for you? then you are in right post 😉

18-02-2014 17-49-48

 

The basic problem is..we need to declare that button in script. Thats it. Anyways follow the steps to implement properly..

1. Add this <script src=”js/button.js”/></script> in head tag

2.Copy <button type=”submit” id=”formsubmit” data-loading-text=”Searching…”>Submit</button>  in body tag

3. Add this script

<script>
$(‘#formsubmit’).button();

$(‘#formsubmit’).click(function() {
$(this).button(‘loading’);
});

</script>

4. Now run 😀

 

How to add callouts to your bootstrap directory

Guys,

Have a look on below image..

10-02-2014 16-13-59

 

This functionality is names as callouts of bootstrap..which are not default for now.

Its pretty simple to add to your css and use it..

Just paste this code in bootstrap.min.css

/* Base styles (regardless of theme) */
.bs-callout {
margin: 20px 0;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
}
.bs-callout h4 {
margin-top: 0;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
background-color: #fcf2f2;
border-color: #d9534f;
}
.bs-callout-warning {
background-color: #fefbed;
border-color: #f0ad4e;
}
.bs-callout-info {
background-color: #f0f7fd;
border-color: #5bc0de;
}

Usage:

<div class=”bs-callout bs-callout-info”>Search Results</div>

<div class=”bs-callout bs-callout-warning”>Search Results</div>

<div class=”bs-callout bs-callout-danger”>Search Results</div>

Create Change Password functionality in codeigniter along with css framework

hey guys, lets see the change password functionality in codeigniter using css framework called twitter bootstrap 🙂

Steps:

1. Create a view in codeigniter for a form displaying old password,new & confirm password labels…

<?php

echo form_open(‘main/changepwd’);
echo validation_errors();

?>
<table class=”table table-bordered”>

<tbody>

<tr>
<td><small><?php echo “Old Password:”;?></small></td>
<td><?php echo form_password(‘opassword’);?></td>

</tr>
<tr>
<td><small><?php echo “New Password:”;?></small></td>
<td><?php echo form_password(‘npassword’);?></td>

</tr>
<tr>
<td><small><?php echo “Confirm Password:”;?></small></td>
<td><?php echo form_password(‘cpassword’);?></td>

</tr>
</tbody>
</table>
&nbsp;&nbsp;<div id=”some”style=”position:relative;”><button type=”submit” class=”btn btn-primary”><i class=” icon-ok-sign icon-white”></i>&nbsp;Submit</button>

<?php

echo form_close();

?>

2. Add this code in Controller page..

public function changepwd(){
$this->load->library(‘form_validation’);
$this->form_validation->set_rules(‘opassword’,’Old Password’,’required|trim|xss_clean|callback_change’);
$this->form_validation->set_rules(‘npassword’,’New Password’,’required|trim’);
$this->form_validation->set_rules(‘cpassword’,’Confirm Password’,’required|trim|matches[npassword]’);

if($this->form_validation->run()!= true)
{
$this->load->view(‘settings’);

}
}
public function change() // we will load models here to check with database
{
$sql = $this->db->select(“*”)->from(“users”)->where(“email”,$this->session->userdata(’email’))->get();

foreach ($sql->result() as $my_info) {

$db_password = $my_info->password;
$db_id = $my_info->id;

}

if(md5($this->input->post(“opassword”)) == $db_password){

$fixed_pw = mysql_real_escape_string(md5($this->input->post(“npassword”)));
$update = $this->db->query(“Update `users` SET `password`=’$fixed_pw’ WHERE `id`=’$db_id'”)or die(mysql_error());
$this->form_validation->set_message(‘change’,'<div class=”alert alert-success”><a href=”#” class=”close” data-dismiss=”alert”>&times;</a>
<strong>Password Updated!</strong></div>’);
return false;

}else
$this->form_validation->set_message(‘change’,'<div class=”alert alert-error”><a href=”#” class=”close” data-dismiss=”alert”>&times;</a>
<strong>Wrong Old Password!</strong> </div>’);

return false;

}

In 2 steps you easily did change password functionality in code igniter na.. 😉 good luck 🙂

How to use date picker in code igniter using twitter bootstrap??

1.Download necessary files from here

2.Copy all the required files to css,less and js of your codeigniter folder..

3. Add the following lines to your php file..

<link rel=”stylesheet” type=”text/css” href=”<?php echo base_url().’css/datepicker.css’?>”/>
<link rel=”stylesheet/less” type=”text/css” href=”<?php echo base_url().’less/datepicker.less’?>” />

<script src=”<?php echo base_url().’js/bootstrap-datepicker.js’?>”></script>

4. Add this code in php file..

<div class=”input-append date” id=”datepicker” data-date=”” data-date-format=”dd-mm-yyyy” >
<input class=”span2″ size=”16″ type=”text” value=”” disabled>
<span class=”add-on”><i class=”icon-th”></i></span>
</div>

<script>
$(‘#datepicker’).datepicker();
</script>

Now execute your php file and verify the date picker is working or not?? simple.. 😉

Try this too or use HTML5 date

Bootstrap Twitter CSS Active Navigation

Hey guys,

Are you worried to make active navigation for your webpage link defaultly..instead of mentioning class=”active” statically??

Then its very simple to achieve..Even myself felt fool for not achieving with logic instead went for google 😛

Just add this code in <li> tag like <li code>

code:

<?php if (basename($_SERVER[‘REQUEST_URI’], “.php”) == “members”){

echo ‘class=”active”‘;
} ?>

In total it appears like..

<ul class=”nav nav-pills”>
<li <?php if (basename($_SERVER[‘REQUEST_URI’], “.php”) == “members”){
echo ‘class=”active”‘;
} ?>><a href=”<?php echo base_url().’main/members’?>”>Home</a></li>
<li <?php if (basename($_SERVER[‘REQUEST_URI’], “.php”) == “perffactors”){
echo ‘class=”active”‘;
} ?>><a href=”<?php echo base_url().’main/perffactors’?>”>Performance Factors</a></li>

<ul>

That’s..very simple na.. 😉

How to create a sticky footer with bootstrap

Just copy and paste to your html file & test it. good luck 😉

Code:

<html>
<head>
<meta charset=”utf-8″ />
<meta name=”author” content=”XYZ” />
<title>Twitter Sticky Footer</title>
<link rel=”stylesheet” href=”css/bootstrap.min.css” />
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -63px;
}
.push {
height: 63px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 60px;
}
</style>
</head>
<body>
<div class=”wrapper”>
<div class=”container”>

</div>
<div class=”push”><!–//–></div>
</div>
<footer>
<div class=”container”>
<p>Twitter Bootstrap Sticky Footer example</p>
</div>
</footer>
</body>
</html>

For reference Clickhere