INU Login Sign up
Login Or Sign up

Answers for "bootstrap grid-item"

Html
2

bootstrap grid 2 rows

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>
Posted by: Guest on October-07-2020
13

bootstrap grid

<!----------------------- BOOTSTRAP GRID SYSTEM ------------------------>

This code will create 4 boxes placed side by side, which will be 
dynamically positioned, according to the size of the screen. We define 
the following behavior: 


<!-- Desktop Display: we have 4 columns per row (each occupies 3 units out of 12)  -->

class = "col-lg-3"   <!-- display large with 12/3 = 4 columns -->


<!-- Tablet Display: we have 3 columns per row (each occupies 4 units out of 12)  -->

class = "col-md-4"   <!-- display medium with 12/4 = 3 columns -->


<!-- Mobile Display: we have 2 columns per row (each occupies the 6 units of 12)  -->

class = "col-sm-6"  <!-- display small with 12/6 = 2 columns -->


<!-- CODE -->

  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:red; border:1px solid black;">
      One of four columns
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow; border:1px solid black;">
      One of four columns
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6" style="background-color:green; border:1px solid black;">
      One of four columns
  	</div>
    <div class="col-lg-3 col-md-4 col-sm-6" style="border:1px solid black;">
      One of four columns
  	</div>
  </div>
Posted by: Guest on August-10-2020

Code answers related to "bootstrap grid-item"

Code answers related to "Html"

Browse Popular Code Answers by Language

Python
Javascript
Whatever
Shell/Bash
CSS
Html
PHP
SQL
Java
C#

Popular Programming Languages

Abap ActionScript Assembly BASIC C C# C++ Clojure Cobol CSS Dart Delphi Elixir Erlang F# Fortran Go Groovy Haskell Html Java Javascript Julia Kotlin Lisp Lua Matlab Objective-C Pascal Perl PHP Prolog Python R Ruby Rust Scala Scheme Shell/Bash SQL Swift TypeScript VBA Whatever

Advertisements

290x500

Company

Compilers

Help

Connect with us

footer logo

Copyright © 2021 Codeinu