Bootstrap Grid Systems Code

01:15
<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="this is my first website">
  <title>Test Website</title>

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="style.css">

</head>

<body>

    <header>

      <div class="navbar navbar-default navbar-fixed-top navbar-inverse">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a href="" class="navbar-brand"><img src="logo.png" alt="facebook" width="120" height="35"></a>
          </div>

          <div class="collapse navbar-collapse" id="example">
            <ul class="nav navbar-nav">
              <li><a href="">Menu 1</a></li>
              <li class="active"><a href="">Menu 2</a></li>
            </ul>
            <!--search bar in right side, u ent 2 plce it left den "navbar-left"-->
            <form action="" class="navbar-form navbar-right" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="search">
              </div>
              <button type="submit" class="btn btn-primary">Search</button>
            </form>
          </div>

        </div>
      </div>


      <div class="jumbotron">
        <div class="container">
          <h1>Hello World!</h1>
          <h3>This Is First Container</h3>
        </div>
      </div>


    </header>


    <div class="container">
      <p>
        <h2>Research & Development (R & D)</h2>
        Efftronics systems Pvt. Ltd. is a knowledge-driven company. Our continuous
         investment in Research & Development (R&D) activities has enabled us to
         develop innovative processes, products and technologies.
          By pioneering new ways of collecting and managing information and
           knowledge, we have strengthened and extended our R&D activities
           to diverse areas. The company has vast expertise in comprehensive
           design, development, assembly and testing of microprocessor / micro controller
           systems for diverse interfaces and applications from the concept.
      </p>

      <p>
        <h2>Single CPU Architecture</h2>
        Controls 25,600 digital outputs, at 20 millisecond refresh rate.
Scans 4096 digital inputs at 16 millisecond rate for monitoring and processing.
Distributed systems, in different hardware configuration, over network in real time control applications.
Data Communication and networking of the systems over the span of 350 Km distance for around 40 numbers of real time data acquisition systems for front-end 24/7 application.
Systems design with types and combination of networking topologies.<br><br>
CPUs, Data communication and other drivers for different environments like Railway Electrified area, along the tracks with high temperature and induced electro magnetic noise levels, industrial, high density traffic roads etc.
System designs with modern CPUs MOTOROLA 68000 & 68008, Intel 8085 & 8086 and 8051 core micro controllers. CPU adoption and design in optimum time on application need.
Designs with many interfaces like different type memories, peripheral Integrated Circuit (ICs), Real Time Clock Integrated Circuit (ICs),Analog-to-Digital Converter (ADC),Digital-to-Analog converter (DAC) etc.
 Serial bus ( I2C) interfaces are applied in demand of design.<br><br>
Logic families and Integrated Circuit (IC) packages for power consumption, speed and other considerations.
Glue circuits and stand alone combinational and sequential machine designs with Programmable Array Logic (PALs),Programmable Logic Device (PLDs)  etc.
User interfaces with numeric and alphanumeric keypads, PC keyboards, LED and LCD modules
Data and system power backups.<br><br>
Data communication interfaces with RS-232, RS-422, RS-485, Current Loop, MODEM,Radio Frequency (RF) MODEM and Power MODEMS.
Parallel port / printer interface.<br><br>
Modular analog measurement design with Voltage to Frequency circuits with the accuracy level less than 1% with isolated channels for AC and DC ranges.
Voice and Interactive Voice Response Systems (IVRS) using Digital to Analog and Analog to Digital converters.
Interface of other systems like Global positioning system (GPS), SMART card reader, RF devices, Telecom devices etc.
</P>
<br><br>

    <div class="divcolor">
      <div class="container">
        <h4>Grid System #01</h4>
        <div class="well">The firts grid of bootstrap</div>
      </div>
    </div>

<div class="divcolor2">
    <div class="container">
      <h4>Grid System for Rows #02</h4>
      <div class="row"><div class="well">this is the first ROW</div></div>
      <div class="row"><div class="well">this is the Second ROW</div></div>
      <div class="row"><div class="well">this is the Third ROW</div></div>
    </div>
  </div>


<div class="divcolor3">
    <div class="container">
      <h4>Grid System for Columns #03</h4>
      <div class="row">
        <div class="col-md-6">
          <div class="well">First Column With half grid(6)</div>
        </div>
        <div class="col-md-3">
          <div class="well">Second Column with 1/4 grid</div>
        </div>
        <div class="col-md-2">
          <div class="well">Third Column with 12/2 grid</div>
        </div>
        <div class="col-md-4">
          <div class="well">Fourth Column with 3/4 grid</div>
        </div>
      </div>
    </div>
  </div>


  <div class="divcolor4">
      <div class="container">
        <h4>Grid System for controlling Device #04</h4>
        <div class="row">

          <div class="col-xs-6 col-md-3">
            <div class="well">First Column With grid "this is the test for the clearfi"</div>
          </div>

          <div class="col-xs-6 col-md-3">
            <div class="well">Second Column with grid</div>
          </div>
          <!-- Add clearfix for only the required viewport -->
              <div class="clearfix visible-xs"></div>
          <div class="col-xs-6 col-md-3">
            <div class="well">Third Column with grid</div>
          </div>

          <div class="col-xs-6 col-md-3">
            <div class="well">Fourth Column with grid</div>
          </div>
        </div>
      </div>
    </div>

<div class="divcolor5">
    <div class="container">
      <h4>Grid System for Column offset #05</h4>
      <div class="row">
        <div class="col-md-4">
          <div class="well">First Column</div>
        </div>
        <div class="col-md-4 col-md-offset-4">
          <div class="well">Second Column</div>
        </div>
      </div>
    </div>
  </div>


  <div class="divcolor6">
      <div class="container">
        <h4>Grid System for Nested Columns #06</h4>
        <div class="row">
          <div class="col-md-9">First Column</div>
            <div class="row">
              <div class="col-sm-6">
                <div class="well">First Nested Column</div>
            </div>
            <div class="col-sm-6">
              <div class="well">Second Nested Column</div>
          </div>
        </div>
        <div class="col-md-3">Second Column</div>
      </div>
    </div>
  </div><br><br><br>



  <h1>Creating Buttons</h1>



  <div class="divcolor7">
    <div class="container">
      <div class="row">
        <div class="well">
          <a href="" class="btn">Button</a>
          <a href="" class="btn btn-primary">Button</a>
          <a href="" class="btn btn-success">Button</a>
          <a href="" class="btn btn-info">Button</a>
          <a href="" class="btn btn-warning">Button</a>
          <a href="" class="btn btn-danger">button</a>
          <a href="" class="btn btn-link">Button</a>

          <hr>

          <a href="" class="btn btn-success btn-lg">Button Large</a>
          <a href="" class="btn btn-primary">Button Large</a>
          <a href="" class="btn btn-primary btn-sm">Button Large</a>
          <a href="" class="btn btn-primary btn-sx">Button Large</a>

          <hr>

          <a href="" class="btn btn-primary btn-sx btn-block">Button Large</a>

          <hr>

          <button type="button" class="btn btn-info">Button with button tag</button>
        </div>
      </div>
    </div>
  </div>




    <div class="container">
      <h3>Glyphicon</h3>
        <div class="row">
          <div class="well">

            <span class="glyphicon glyphicon-trash"></span>
            <span class="glyphicon glyphicon-search"></span>

            <a href="" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></a>

            <!-- We can give sizes for the glyphicons also linke
              <style>
              .glyphicon
              {
              font-size: 5em;
            }
          </style>
           -->
           <a href="" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-search"></span></a>
           <a href="" class="btn btn-info btn-md"><span class="glyphicon glyphicon-search"></span></a>
           <a href="" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-search"></span></a>
           <a href="" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-search"></span></a>
          </div>
        </div>
      </div>


    <div class="divcolor8">
      <div class="container">
        <form action="">
          <h4>Using Different form</h4>
          <div class="form-group">
            <label for="element-1">this is the text of the lable 1</label>
            <input type="text" id="element-1" class="form-control">
          </div>
          <div class="form-group">
            <label for="element-2">this is the text of the lable 2</label>
            <input type="text" id="element-2" class="form-control">
          </div>
          <p class="help-block">Enter the strong password</p>
        </form>

        <hr>

        <form action="" class="form-inline">
              <div class="form-group">
            <label for="element-3" class="sr-only">this is the text of the lable 3</label>
            <input type="text" id="element-3" class="form-control" placeholder="Enter Email">
          </div>
          <div class="form-group">
            <label for="element-4" class="sr-only">this is the text of the lable 4</label>
            <input type="password" id="element-4" class="form-control" placeholder="Enter Password">
          </div>
          <div class="checkbox">
            <label for=""><input type="checkbox">Remember me</label>
          <button type="button" class="btn btn-primary">Sign In</button>
        </form>
      </div>
    </div>

    <div class="container">
  <h1 class="page-header">Login</h1>

<form class="form-horizontal" role="form" action="#">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Password:</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary">Login</button>
      </div>
    </div>
</form>
</div>
<style>
h4{ margin-top:50px; }
</style>

<div class="container">
  <h3>Tables</h3>
  <div class="well">
    <table class="table">   <!--go for getbootstrap.com for more tables in css menu -->
      <tr>
        <td><b>First Name</b></td>
        <td><b>Second Name</b></td>
        <td><b>Age</b></td>
      </tr>
      <tr>
        <td>Jagadeesh</td>
        <td>Marlapati</td>
        <td>29</td>
      </tr>
      <tr>
        <td>Pradeep Reddy</td>
        <td>Chilakala</td>
        <td>23</td>
      </tr>
    </table>
  </div>
</div>


<div class="container">
  <h3>Creating Dropdowns</h3>
  <div  class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
      dropdown button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="">sub menu 1</a></li>
      <li><a href="">sub menu 2</a></li>
      <li><a href="">sub menu 3</a></li>

      <!--if you want to devide the menu with line then write the flwng code -->
      <li class="divider"></li>


      <li><a href="">sub menu 4</a></li>
      <li><a href="">sub menu 5</a></li>
      <li><a href="">sub menu 6</a></li>
    </ul>
  </div>
</div><br><br><br><br><br><br><br><br><br><br><br>


<div class="container">
  <h3>Creating Nav Bars</h3>
  <ul class="nav nav-pills">  <!--class="nav nav-pills"forvertical menu,
    class="nav nav-justified for justify menu" -->
    <li class="active"><a href="#Home" data-toggle="tab">Home</a></li>
    <li><a href="#About" data-toggle="tab">About</a></li>
    <li><a href="#Contact" data-toggle="tab">Contact</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane fade" id="Home">
      <p>this is the first para</p>
    </div>
    <div class="tab-pane fade" id="About">
      <p>this is the second para</p>
    </div>
    <div class="tab-pane fade" id="Contact">
      <p>this is the third para</p>
    </div>
  </div>
</div>


<div class="container">
  <h3>Creating List groups and items</h3>

    <ul class="list-group">
      <li class="list-group-item">This is the content<span class="badge">1</span></li>
      <li class="list-group-item">This is the content<span class="badge">2</span></li>
      <li class="list-group-item">This is the content<span class="badge">3</span></li>
      <li class="list-group-item">This is the content<span class="badge">4</span></li>
    </ul>

    <hr>

    <div class="list-group">
      <a href="" class="list-group-item">Item 1</a>
      <a href="" class="list-group-item">Item 2</a>
      <a href="" class="list-group-item">Item 3</a>
      <a href="" class="list-group-item">Item 4</a>
    </div>

    <hr>

    <div class="list-group">
      <a href="" class="list-group-item list-group-item-default">Item 1</a>
      <a href="" class="list-group-item list-group-item-warning">Item 2</a>
      <a href="" class="list-group-item list-group-item-danger">Item 3</a>
      <a href="" class="list-group-item list-group-item-success">Item 4</a>
    </div>

    <hr>

    <div class="list-group">
      <a href="" class="list-group-item active">
        <h1 class="list-group-item-heading">This is heading</h1>
        <p class="list-group-item-text">This is the paragraph</p>
      </a>

      <a href="" class="list-group-item">
        <h1 class="list-group-item-heading">This is heading</h1>
        <p class="list-group-item-text">This is the paragraph</p>
      </a>

      <a href="" class="list-group-item">
        <h1 class="list-group-item-heading">This is heading</h1>
        <p class="list-group-item-text">This is the paragraph</p>
      </a>

      <a href="" class="list-group-item">
        <h1 class="list-group-item-heading">This is heading</h1>
        <p class="list-group-item-text">This is the paragraph</p>
      </a>

  </div>
</div>


<div class="container">
    <div class="row">
        <div class="col-md-5">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-comment"></span> Chat
                    <div class="btn-group pull-right">
                        <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                            <span class="glyphicon glyphicon-chevron-down"></span>
                        </button>
                        <ul class="dropdown-menu slidedown">
                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-refresh">
                            </span>Refresh</a></li>
                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-ok-sign">
                            </span>Available</a></li>
                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-remove">
                            </span>Busy</a></li>
                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-time"></span>
                                Away</a></li>
                            <li class="divider"></li>
                            <li><a href="http://www.jquery2dotnet.com"><span class="glyphicon glyphicon-off"></span>
                                Sign Out</a></li>
                        </ul>
                    </div>
                </div>
                <div class="panel-body">
                    <ul class="chat">
                        <li class="left clearfix"><span class="chat-img pull-left">
                            <img src="http://placehold.it/50/55C1E7/fff&amp;text=U" alt="User Avatar" class="img-circle">
                        </span>
                            <div class="chat-body clearfix">
                                <div class="header">
                                    <strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted">
                                        <span class="glyphicon glyphicon-time"></span>12 mins ago</small>
                                </div>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
                                    dolor, quis ullamcorper ligula sodales.
                                </p>
                            </div>
                        </li>
                        <li class="right clearfix"><span class="chat-img pull-right">
                            <img src="http://placehold.it/50/FA6F57/fff&amp;text=ME" alt="User Avatar" class="img-circle">
                        </span>
                            <div class="chat-body clearfix">
                                <div class="header">
                                    <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>13 mins ago</small>
                                    <strong class="pull-right primary-font">Bhaumik Patel</strong>
                                </div>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
                                    dolor, quis ullamcorper ligula sodales.
                                </p>
                            </div>
                        </li>
                        <li class="left clearfix"><span class="chat-img pull-left">
                            <img src="http://placehold.it/50/55C1E7/fff&amp;text=U" alt="User Avatar" class="img-circle">
                        </span>
                            <div class="chat-body clearfix">
                                <div class="header">
                                    <strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted">
                                        <span class="glyphicon glyphicon-time"></span>14 mins ago</small>
                                </div>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
                                    dolor, quis ullamcorper ligula sodales.
                                </p>
                            </div>
                        </li>
                        <li class="right clearfix"><span class="chat-img pull-right">
                            <img src="http://placehold.it/50/FA6F57/fff&amp;text=ME" alt="User Avatar" class="img-circle">
                        </span>
                            <div class="chat-body clearfix">
                                <div class="header">
                                    <small class=" text-muted"><span class="glyphicon glyphicon-time"></span>15 mins ago</small>
                                    <strong class="pull-right primary-font">Bhaumik Patel</strong>
                                </div>
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
                                    dolor, quis ullamcorper ligula sodales.
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="panel-footer">
                    <div class="input-group">
                        <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here...">
                        <span class="input-group-btn">
                            <button class="btn btn-warning btn-sm" id="btn-chat">
                                Send</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>






<br><br>
    <footer>
      <a href="https://www.facebook.com/efftronics/"><img src="facebook.png" alt="facebook" width="30" height="30"></a>
      <a href="https://twitter.com/efftronicshr"><img src="twitter.png" alt="twitter" width="30" height="30"></a>
    </footer>




</body>
</html>

12 comments: Leave Your Comments

  1. MS Dynamics1 April 2020 at 05:19

    Thanks for posting. Its an Important topic to be read.
    Full Stack Online Training

    Full Stack Training

    Full Stack Developer Online Training

    ReplyDelete
  2. alex13 April 2020 at 01:01

    Great post.
    http://www.23hq.com/SulafahAreejMansour/a/about

    ReplyDelete
  3. Amar Prem20 April 2020 at 22:31

    If your budget is running short and ranking of the website going down, then you should buy SEO services from us. We are a prominent SEO company in this domain that is highly cherished among the people for our best services.

    ReplyDelete
  4. Robin Dunn23 April 2020 at 01:58

    Are you a student of Oman and looking for Assignment Help? If yes then you can seek help from our professional experts. Our team has been working in this profession for the last many years.
    Also visit here: Assignment Help Online
    Homework Help
    Strategic Management Assignment Help

    ReplyDelete
  5. dhinesh17 July 2020 at 09:13

    Thanks for sharing this. Its an Important topic to be.
    Full Stack Training in Chennai | Certification | Online Training Course| Full Stack Training in Bangalore | Certification | Online Training Course | Full Stack Training in Hyderabad | Certification | Online Training Course | Full Stack Developer Training in Chennai | Mean Stack Developer Training in Chennai | Full Stack Training | Certification | Full Stack Online Training Course

    ReplyDelete
  6. alex20 October 2020 at 05:06

    Great post.
    https://weheartit.com/jameslr649

    ReplyDelete
  7. Sandeep Gifola9 November 2020 at 03:11

    Thanks for sharing the important and awesome information, Thank you. Buy Gifts Online

    ReplyDelete
  8. erection pills viagra online25 November 2020 at 07:56

    I used to be able to find good information from your blog articles.

    ReplyDelete
  9. ed treatment tablets25 November 2020 at 11:59

    Wow, amazing blog structure! How long have you ever been blogging for? you made running a blog glance easy. The overall look of your website is magnificent, as smartly as the content!

    ReplyDelete
  10. Viaan14 April 2021 at 03:27

    Great post.
    https://www.skillshare.com/profile/Viaan-Acharya/769825578

    ReplyDelete
  11. devin1227 April 2021 at 00:51

    Awesome post, I learned something new. thanks for giving this information, We refreshed all the moving new data identified with any points.
    To be more refreshed pretty much all the news around you, you can check this site hinda cbr65r

    ReplyDelete
  12. Qunock69873 December 2021 at 02:14

    This service not only lets you watch your stuff, but it also has tons of other features in its safe. From tracking your content to organizing remotely, optimizing media for devices or bandwidth, and protecting your privacy, it does everything you can expect.Plex tv link

    ReplyDelete

+

Copyright 2014 Total Digital Marketing

Designed by Template Trackers