Thursday, July 9, 2015

Bootstrap Tutorial For Beginners 3 - Row and Column in Grid System











<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
 <div class="container">
     <div class="row">      
    <div class="col-md-1">
  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>

 </div>
  <div class="col-md-8">
  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>

 </div>
  <div class="col-md-3">
  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>

 </div>
  </div>
       <div class="row">      
    <div class="col-md-1">
  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>

 </div>
  <div class="col-md-8">
  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>

 </div>
  <div class="col-md-3">
  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>

 </div>
  </div>
       <div class="row">      
    <div class="col-md-1">
  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>

 </div>
  <div class="col-md-8">
  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>

 </div>
  <div class="col-md-3">
  
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc suscipit convallis nisl, eget rutrum lectus commodo at. Pellentesque mattis justo vel augue pretium euismod. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce eu turpis eros.</p>

 </div>
  </div>

   </div>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>














Searches related to bootstrap row column

bootstrap row column padding

bootstrap row column same height

bootstrap row column container

bootstrap 3 row

bootstrap row fluid

bootstrap row margin

bootstrap row center

bootstrap row inside row
IT Certification Category (English)640x480

Partner Sites

VideoToGifs.com

EasyOnlineConverter.com

SqliteTutorials.com


Top Online Courses From ProgrammingKnowledge

Python Course http://bit.ly/2vsuMaS
Java Coursehttp://bit.ly/2GEfQMf
Bash Coursehttp://bit.ly/2DBVF0C
Linux Coursehttp://bit.ly/2IXuil0
C Course http://bit.ly/2GQCiD1
C++ Coursehttp://bit.ly/2V4oEVJ
PHP Coursehttp://bit.ly/2XP71WH
Android Coursehttp://bit.ly/2UHih5H
C# Coursehttp://bit.ly/2Vr7HEl
JavaFx Coursehttp://bit.ly/2XMvZWA
NodeJs Coursehttp://bit.ly/2GPg7gA
Jenkins Course http://bit.ly/2Wd4l4W
Scala Coursehttp://bit.ly/2PysyA4
Bootstrap Coursehttp://bit.ly/2DFQ2yC
MongoDB Coursehttp://bit.ly/2LaCJfP
QT C++ GUI Coursehttp://bit.ly/2vwqHSZ