A Pen by env

Thumbnail
This awesome code was written by enveetie, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright enveetie ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <!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">
<title>Example of Bootstrap 3 Two Column Grid Layouts for Tablets and Desktops</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
    /* Some custom styles to beautify this example */
    .demo-content{
        padding: 15px;
        font-size: 18px;
        min-height: 300px;
        background: #dbdfe5;
        margin-bottom: 10px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
</style>
</head>
<body>
    <!-- Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works. -->
    <div class="container">
        <!--Row with two equal columns-->
        <div class="row">
            <div class="col-sm-6">
                <div class="demo-content">.col-sm-6</div>
            </div>
            <div class="col-sm-6">
                <div class="demo-content bg-alt">.col-sm-6</div>
            </div>
        </div>
        <hr>
        <!--Row with two columns divided in 1:2 ratio-->
        <div class="row">
            <div class="col-sm-4">
                <div class="demo-content">.col-sm-4</div>
            </div>
            <div class="col-sm-8">
                <div class="demo-content bg-alt">.col-sm-8</div>
            </div>
        </div>
        <hr>
        <!--Row with two columns divided in 1:3 ratio-->
        <div class="row">
            <div class="col-sm-3">
                <div class="demo-content">.col-sm-3</div>
            </div>
            <div class="col-sm-9">
                <div class="demo-content bg-alt">.col-sm-9</div>
            </div>
        </div>
    </div>
</body>
</html>                                		

/*Downloaded from https://www.codeseek.co/enveetie/a-pen-by-env-LyWqJJ */
     .demo-content{
        padding: 15px;
        font-size: 18px;
        min-height: 300px;
        background: #dbdfe5;
        margin-bottom: 10px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }


/*Downloaded from https://www.codeseek.co/enveetie/a-pen-by-env-LyWqJJ */
    

Comments