CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
user348173
user348173

Reputation: 9288

Like vertical rows in bootstrap

I want to create the following layout for my page: enter image description here

Is it possible to create it with boostrap? I see that it's possible with help of flexbox or custom css only.

Upvotes: 0

Views: 33

Answers (2)

Venkatachalam
Venkatachalam

Reputation: 154

.left-box{
        border: 2px solid #000;
        margin: 2% 0%;
        height: 75px;
        width: 100%;
    }
.right-box{
        border: 2px solid #000;
        height: 225px;
        width: 100%;
        margin: 1% 0%;
    }
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
    <div class="col-sm-2">
        <div class="col-xs-12 left-box">Div 1</div>
        <div class="col-xs-12 left-box">Div 2</div>
        <div class="col-xs-12 left-box">Div 3</div>
    </div>
    <div class="col-sm-10">
        <div class="col-xs-12 right-box">Div 4</div>
    </div>

</div>
</body>

Upvotes: 0

Pranjal
Pranjal

Reputation: 1128

Tried this with bootstrap..

<style>
    .small-div{
        border: 2px solid #000;
        margin-bottom: 10px;
        height: 25px;
    }
    .big-div{
        border: 2px solid #000;
        height: 100px;
    }
</style>

<body>
<div class="container">
    <div class="col-md-2">
        <div class="col-md-12 small-div">Div 1</div>
        <div class="col-md-12 small-div">Div 2</div>
        <div class="col-md-12 small-div">Div 3</div>
    </div>
    <div class="col-md-10">
        <div class="col-md-12 big-div">Div 4</div>
    </div>

</div>
</body>

Upvotes: 2

Related Questions