CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Suvojit
Suvojit

Reputation: 379

How to implement this design using Bootstrap Grid?

I want to implement the below grid structure,

Properly Aligned Required

I have used the following to achieve this:

<div class="col-lg-8">
    <div class="col-lg-6">
        <div class="panel panel-primary">
             <!-- Default panel contents -->
            <div class="panel-heading">
                ....
            </div>

            <div class="panel-body">
                ....
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="panel panel-primary">
             <!-- Default panel contents -->
            <div class="panel-heading">
                ....
            </div>

            <div class="panel-body">
                ....
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="panel panel-primary">
             <!-- Default panel contents -->
            <div class="panel-heading">
                ....
            </div>

            <div class="panel-body">
                ....
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="panel panel-primary">
             <!-- Default panel contents -->
            <div class="panel-heading">
                ....
            </div>

            <div class="panel-body">
                ....
            </div>
        </div>
    </div>
</div>

<div class="col-lg-4">
    <div class="panel panel-primary">

         <!-- Default panel contents -->
        <div class="panel-heading">
            ....
        </div>

        <div class="panel-body">
            ....
        </div>
    </div>
</div>

The problem I am facing is that this grid structure is achieved but the all the panels/box are not aligned,

Improper Alignment

How can I make the Bottom of all Div/Panels Aligned ??

Upvotes: 0

Views: 131

Answers (2)

Diego Cardenas
Diego Cardenas

Reputation: 393

well i using my own css property look the example Fixed Design

Here the code: 

<style>
.pad1{
    margin: 2px 2px 2px 2px;
    border: 1px solid #000;
    min-height: 100px;
}
.pad2{
    margin: 2px 2px 2px -130%;
    border: 1px solid #000;
    min-height: 204px;
}
</style>

Upvotes: 0

Coded Pixel
Coded Pixel

Reputation: 11

You should add Row divs to define the rows

<div class="row">
	<div class="col-lg-8">
		<div class="row">
			<div class="col-lg-6">
				<div class="panel panel-primary">
					<!-- Default panel contents -->
					<div class="panel-heading">
						....
					</div>
					<div class="panel-body">
						....
					</div>
				</div>
			</div>

			<div class="col-lg-6">
				<div class="panel panel-primary">
					<!-- Default panel contents -->
					<div class="panel-heading">
						....
					</div>
					<div class="panel-body">
						....
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-6">
				<div class="panel panel-primary">
					<!-- Default panel contents -->
					<div class="panel-heading">
						....
					</div>
					<div class="panel-body">
						....
					</div>
				</div>
			</div>
			<div class="col-lg-6">
				<div class="panel panel-primary">
					<!-- Default panel contents -->
					<div class="panel-heading">
						....
					</div>
					<div class="panel-body">
						....
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-lg-4">
		<div class="panel panel-primary">
			<!-- Default panel contents -->
			<div class="panel-heading">
				....
			</div>
			<div class="panel-body">
				....
			</div>
		</div>
	</div>
</div>

Upvotes: 1

Related Questions