I've seen this thread but its for 2 column (col-md-6) and I've tried the jsfidlle too for 3 column but column 1st and column 2nd become stack.
Bootstrap 3 Align Text To Bottom of Div
what I want for my project is
.row {
position: relative;
}
.bottom-align-text {
position: absolute;
bottom: 0;
right: 0;
}
<div class="container">
<div class="row">
<div class="bottom-align-text col-sm-4">
<h3>Some Text</h3>
</div>
<div class="col-sm-4">
<img src="//placehold.it/600x300" alt="Logo" class="img-responsive"/>
</div>
<div class="bottom-align-text col-sm-4">
<h3>Some Text</h3>
</div>
</div>
</div>
how to make them both align bottom?
flexbox can do that
.row div {
border: 1px solid red;
}
.flexy {
display: flex;
text-align: center;
}
.flexy .bottom-align-text {
display: flex;
justify-content: center;
align-items: flex-end;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row flexy">
<div class="bottom-align-text col-sm-4">
<h3>Some Text</h3>
</div>
<div class="col-sm-4">
<img src="//placehold.it/600x300" alt="Logo" class="img-responsive" />
</div>
<div class="bottom-align-text col-sm-4">
<h3>Some Text</h3>
</div>
</div>
</div>
You can wrap column 1st and column 2nd in to a row then we'll have 2 columns structure. See my jsFiddle demo: https://jsfiddle.net/robinhuy/kg1ykfL1/3/
Related
I'm trying to achieve this, where brown gets pushed down when pink is too long, and pink is dynamically sized based on its text content.
I was only able to achieve this using javascript and two templates, if pink length is over X use second template, but I'm wondering if there's a way to achieve this using CSS only?
I tried meddling with grid auto-fill/auto-fit with minmax, float, flex with wrap, but I couldn't get to the desired result with these.
.parent {
width: 170px;
}
.flex {
display: flex;
}
div {
outline: 2px solid rgba(255, 0,0, 0.3);
}
<div>
<p>scenario A</p>
<div class="parent flex">
<div>
<div class="one">A short title</div>
<div class="three">Some text here</div>
<div class="three">some more text</div>
</div>
<div>
<button>A button</button>
</div>
</div>
</div>
<div>
<p>scenario B</p>
<div class="parent">
<div class="one">Testing a very long title</div>
<div class="flex">
<div>
<div class="three">Some text here</div>
<div class="three">some more text</div>
</div>
<div>
<button>A button</button>
</div>
</div>
</div>
</div>
<p>can a component achieve both a and b with only css?
I found a solution, it requires having fixed height in the first row, and the right side button will basically overflow when needed.
Will wait a bit before accepting my own solution in case someone came with a better one.
.container {
width: 300px;
display: flex;
gap: 10px;
padding: 16px;
font-size: 14px;
font-family: Arial;
}
.text {
flex: 1;
min-width: 0;
}
.first-row {
height: 22px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.image {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #444;
}
.title {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<h2>Long title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Test title test title test title</div>
<button>Visit store</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
<h2>Short title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Short title</div>
<button>Visit place</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
<h2>Very long title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Test title test titleTest title test titleTest title test title</div>
<button>Visit place</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
I have pages with containers that contain rows containing columns.
I would like to enlarge the space between my columns
Here’s the code from my front page.
The first column of my second row must be the size of the first 2 columns of my first row.
<div class="container">
<div class="row">
<div class="col-md-4 card">
row 1 col 1
</div>
<div class="col-md-4 card">
row 1 col 2
</div>
<div class="col-md-4 card">
row 1 col 3
</div>
</div>
<div class="row">
<div class="col-md-8 card">
row 2 col 1
</div>
<div class="col-md-4 card">
row 2 col 2
</div>
</div>
</div>
For my second page, here is the code
<div class="container">
<div class="row">
<div class="col-md-8 card">
row 1 col 1
</div>
<div class="col-md-4 card">
row 1 col 2
</div>
</div>
</div>
I am this currently
Current Behavior
I want to expand the space between my columns. And that on the second line, while enlarging my margins, that the first column remains aligned with the first 2 of the first line
I have redone my page with flex but I still can’t align the first column of my second line with the first 2 of the first line
<div class="container">
<h3>Title</h3>
<div fxLayout="row" class="flex-row" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutAlign="center">
<mat-card class="bloc-section" fxFlex="33.3%">
row 1 col 1
</mat-card>
<mat-card class="bloc-section" fxFlex="33.3%">
row 1 col 2
</mat-card>
<mat-card class="bloc-section" fxFlex="33.3%">
row 1 col 3
</mat-card>
</div>
<div fxLayout="row" class="flex-row" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutAlign="center">
<mat-card class="bloc-section" fxFlex="67%">
row 2 col 1
</mat-card>
<mat-card class="bloc-section" fxFlex="33%">
row 2 col 2
</mat-card>
</div>
</div>
You can add css like this
.container .row {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
And fix your template
<div class="container">
<div class="row">
<div class="col-md-4 card">
row 1 col 1
</div>
<div class="col-md-4 card">
row 1 col 2
</div>
</div>
</div>
Do not try to copy the code. Try to understand the concept so you can create any grade.
At Bootstrap we have 12 columns (per row). This means that each row must be assigned to 12 columns
You should also know that: Bootstrap 3.
Note: It's different in Bootstrap 4.
xs: screens less than 768px wide
sm: screens equal to or greater than 768px wide
md: screens equal to or greater than 992px wide
lg: screens equal to or greater than 1200px wide
Your example:
In the first row, we have 3 equal columns: 12 / 3 = 4
In the second row, we have 2 columns.
That First column = first two columns in the previous row: 4 + 4 = 8
Example for xs: < 768px
Affects all sizes.
.row div div{
border-radius: 10px;
border: 2px solid;
background:#ddF;
text-align:center;
}
.row.mar{
margin-top:2px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-4"><div>.col-xs-4</div></div>
<div class="col-xs-4"><div>.col-xs-4</div></div>
<div class="col-xs-4"><div>.col-xs-4</div></div>
</div>
<div class="row mar">
<div class="col-xs-8"><div>.col-xs-8</div></div>
<div class="col-xs-4"><div>.col-xs-4</div></div>
</div>
</div>
Example for sm: >= 768px
As a result, the size of each column is 12 (total). for less than 768px
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-4"><div style="background:#ddd;">.col-sm-4</div></div>
<div class="col-sm-4"><div style="background:#ddd;">.col-sm-4</div></div>
<div class="col-sm-4"><div style="background:#ddd;">.col-sm-4</div></div>
</div>
<div class="row">
<div class="col-sm-8"><div style="background:#ddd;text-align: center;">.col-sm-8</div></div>
<div class="col-sm-4"><div style="background:#fdd;">.col-sm-4</div></div>
</div>
</div>
Custom example:
First row:
Only xs-4. For all sizes. Affects all sizes because no other size is defined.
Second row:
xs-4 and 4 md-7 and 5 lg-6 and 6 ( > 1200 (6) and > 992px(7,5) and other sizes(4))
.row div p{
border-radius: 10px;
border: 2px solid;
text-align:center;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-4"><p style="background:#E9F9B9;">All-4</p></div>
<div class="col-xs-4"><p style="background:#ddd;">All-4</p></div>
<div class="col-xs-4"><p style="background:#E9FCF9;">All-4</p></div>
</div>
<div class="row">
<div class="col-xs-8 col-md-7 col-lg-6"><p style="background:lavender;">xs-4 md-7 lg-6</p></div>
<div class="col-xs-4 col-md-5 col-lg-6"><p style="background:#FFF1F4">xs-4 md-5 lg-6</p></div>
</div>
</div>
Using flexbox
If you use Bootstrap 4, you don't need CSS code.
*{
box-sizing: border-box;
}
.flex-container{
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background-color: lavender;
}
.col-4,.col-8{
position: relative;
width: 100%;
padding-right: 5px;
padding-left: 5px;
box-sizing: border-box;
}
.col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-8{
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.flex-container > div div{
background:#E4F1F6;
padding:2px 6px;
margin:5px;
}
<div class="flex-container">
<div class="col-4"><div>1</div></div>
<div class="col-4"><div>2</div></div>
<div class="col-4"><div>3</div></div>
</div>
<div class="flex-container">
<div class="col-8"><div>A</div></div>
<div class="col-4"><div>B</div></div>
</div>
B
.flex-container {
display: flex;
align-items: stretch;
}
.flex-container > div {
background-color: lavender;
color: black;
margin: 3px;
text-align: center;
width: 33.3%;
line-height: 75px;
font-size: 30px;
}
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 1">3</div>
</div>
<div class="flex-container">
<div style="flex-grow: 2; width: 67%;">A</div>
<div style="flex-grow: 1">B</div>
</div>
You are basically doing exactly what you should. You want the bootstrap md-X columns to handle most of the formatting.
However, your inner elements are what you want to align, more specifically you should probably add some:
https://www.w3schools.com/code/tryit.asp?filename=G8K0XRXB2V8B
And the html / CSS to get it to look this way:
<style>
.filler {
border-radius: 15px;
border-style: solid;
}
</style>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row wide-fill">
<div class="col-sm-4 spacy" style="background-color:lavender;">
<div class="filler">.col-sm-4</div>
</div>
<div class="col-sm-4 spacy" style="background-color:lavenderblush;">
<div class="filler">.col-sm-4</div>
</div>
<div class="col-sm-4 spacy" style="background-color:lavenderblush;">
<div class="filler">.col-sm-4</div>
</div>
</div>
<div class="row">
<div class="col-sm-8 spacy" style="background-color:lavender;">
<div class="filler">.col-sm-8</div>
</div>
<div class="col-sm-4 spacy" style="background-color:lavenderblush;">
<div class="filler">.col-sm-4</div>
</div>
</div>
</div>
I'm trying to create a page where I have image 1 on top and the text at the bottom and image 2 at the bottom and the text on top. I'm not sure how to go about doing it this way.
In my JSFIDDLE I would like "Text 1" to be at the bottom. "Text 2" on top and "Text 3" at the bottom.
my html
<div class="gallery_wrapper">
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/QuLaaLb.jpg">
</div>
<div class="gallery_title">
<h2>
Text 1
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 2
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/QuLaaLb.jpg">
</div>
<div class="gallery_title">
<h2>
Text 3
</h2>
</div>
</div>
JSFIDDLE
This should help you get started. You can use flex and pseudo-properties to achieve this.
.gallery_wrapper {
display: flex;
}
.gallery {
background: #333333;
}
.gallery:nth-child(even) {
display: flex;
flex-direction: column-reverse;
}
.gallery_title {
color: #fff
}
<div class="gallery_wrapper">
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 1
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 2
</h2>
</div>
</div>
<div class="gallery">
<div class="gallery_image">
<img src="http://i.imgur.com/vFEg6ef.jpg">
</div>
<div class="gallery_title">
<h2>
Text 3
</h2>
</div>
</div>
</div>
You can use flexbox for your requirement.
In flexbox there are two properties with which you can solve your issue. Either using order or using flex-direction. But flex-direction is for parent and order is for child. So you can use any of the properties to solve your problem.
In this example snippet, I use order.
.item {
display: flex;
flex-direction: column;
}
.text {
font-size: 20px;
}
.image {
display: flex;
width: 200px;
height: 200px;
background-image: url('https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.item:nth-child(2n) .text {
order: 2;
}
<section>
<div class="item">
<span class="text">Text 1</span>
<span class="image"></span>
</div>
<div class="item">
<span class="text">Text 2</span>
<span class="image"></span>
</div>
<div class="item">
<span class="text">Text 3</span>
<span class="image"></span>
</div>
</section>
You can add the following CSS to achieve this.
.gallery{
position: relative;
}
.gallery_title{
position: absolute;
bottom: 5px;
left: 0;
}
.gallery:nth-child(even) .gallery_title{
bottom: auto;
top: 5px;
}
Check the link here jsfiddle
Issue: So vertical alignment issue is I have two divs in the last column and I'm trying to get one to stay at top and one to stay at the bottom regardless of how the central column grows. I can work this out by using fixed heights but that's no good in this case.
Here is my code example : JS Fiddle
HTML:
<div class="row" class="property-bundle"><!-- (x) number of these -->
<div class="col-xs-11 wrapper">
<div class="row">
<div class="col-xs-2 pull-left vendor">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-xs-8 properties-list">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 1</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 2</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 3</p></div>
</div>
</div>
<div class="col-xs-2 costs"><!-- costs column -->
<div class="row total">
<h3 class="text-right">TOTAL: £1,2M</h3><!--stay at top-->
</div>
<div class="row" class="fees"> <!--stay at bottom-->
<div class="col-xs-12">
<hr/>
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.wrapper {border: 1px solid black; padding: 10px; margin: 15px;}
.vendor {min-width: 120px;}
.properties-list {background-color: aquamarine}
.costs {vertical-align: top; min-width: 150px; vertical-align: center}
.fees {vertical-align: bottom; }
h3 {font-weight: 400}
h4 {color: green}
.total { margin-right: 0px; }
Hi you can try using flexbox
I just change your html like this:
<div class="col-xs-2 costs">
<!--stay at top-->
<div class="total">
<h3 class="text-right">TOTAL: £1,2M</h3>
</div>
<hr/>
<div class="materials">
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
Then I add on costs div display:flex;and on total div flex-grow: 1 This flex-grow will push materials on bottom of div.
You just need to add on body, html, row and costs div height:100%
Here is css:
.costs {
vertical-align: center;
display: flex;
flex-direction: column;
height: 100%;
}
.total {
flex-grow: 1;
}
You can see example on this link: https://jsfiddle.net/3L5Lbwhn/9/
Ok I simplified this a bit, but essentially flex did what I needed so many thanks to Edin Puzic for putting me on the right lines! It also allowed me to fix the 1st and last col width and make the middle one dynamic horiontally too.
JsFiddle
<div class="row-flex">
<div class="col-flex-1">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-flex-2">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 1</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 2</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 3</p>
</div>
</div>
</div>
<div class="col-flex-3">
<div class="pos-top">
<div class="row right-text">
TOP right
</div>
</div>
<div class="pos-bottom">
<div class="row right-text">
<p>
BOTTOM right
</p>
</div>
</div>
</div>
</div>
CSS
.row-flex {
height: auto;
display: flex;
flex-flow: row column;
}
.col-flex-1 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.col-flex-2 {
width: 80%;
border-left: 1px #ccc solid;
flex: 1 1;
}
.col-flex-3 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
background-color: lightgrey;
}
.pos-top {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-start;
align-items: flex-start;
background-color: yellow;
}
.pos-bottom {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-end;
align-items: flex-end;
background-color: green;
}
.right-text {
text-align: right;
width: 100%;
}
I'm trying to achieve a layout like below in Bootstrap but am having a difficult time with it. I feel dumb asking this but it's my first time using Bootstrap and I couldn't find a similar example on here.
Thanks!
I thought maybe something like this, but div C clears div B and ends up way too far down the page.
<div class="container">
<div class="row">
<div class="col-md-8">
A
</div>
<div class="col-md-4">
B
</div>
</div>
<div class="row">
<div class="col-md-8">
C
</div>
</div>
</div>
If you need a pure bootstrap solution you need to add col-xs-12 to make it 100% on mobiles and col-sm-6 to make it 50% on desktop. The add pull-left and pull-right to avoid the B panel to clear and move C below everything
.bg-danger, .bg-primary {
height: 200px;
}
.bg-success {
height: 400px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row container-fluid">
<div class="col-sm-6 col-xs-12 bg-danger pull-left"></div>
<div class="col-sm-6 col-xs-12 bg-success pull-right"></div>
<div class="col-sm-6 col-xs-12 bg-primary pull-left"></div>
</div>
</div></body>
</html>
Click full page to see the difference
Here we have an explanation about the grid system.
http://getbootstrap.com/css/#grid
Here's a simple solution:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
</div>
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
The page is split in half with the two outer columns "col-sm-6", with one of these columns containing two inner columns that span it's entire width
A simple solution if you want essentailly the green box to come in between.
Check this Bootply for responsive-ness check.
Snippet here:
.something {
height: 100px;
margin-top: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="something bg-danger"></div>
</div>
<div class="col-md-6">
<div class="something bg-success"></div>
</div>
<div class="col-md-6">
<div class="something bg-primary"></div>
</div>
</div>
</div>
Here is another example where the Green box will come below the rest two boxes..:
.something {
height: 100px;
margin-top: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div clas="col-md-6">
<div class="col-md-12">
<div class="something bg-danger"></div>
</div>
<div class="col-md-12">
<div class="something bg-primary"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="something bg-success"></div>
</div>
</div>
</div>
You should use Pure CSS Flexbox for this.
Have a look at the snippet below (use full screen for desktop mode):
.box-holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 280px;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid #000;
color: #fff;
margin: 15px;
font-size: 40px;
font-weight: 200;
}
.a {
background: red;
}
.b {
align-self: flex-start;
order: 1;
background: green;
height: 240px;
margin: 0;
}
.c {
background: blue;
}
/* On Mobiles */
#media screen and (max-width: 700px) {
.box-holder {
width: auto;
height: auto;
}
.b {
align-self: center !important;
order: 0;
margin: 15px;
}
}
<div class="box-holder">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
</div>
Hope this helps!
I hope this helps..:)
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3"><!--div for the left side abc pattern starts-->
<div class="row">
<div class="col-sm-12">
"standing a"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"standing b - adjust the height of this block"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"standing c"
</div>
</div>
</div><!-- div for the left side abc pattern ends -->
<div class="col-sm-6"><!-- div for the right side abc pattern starts -->
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
"block a"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"block b"
</div>
</div>
</div>
<div class="col-sm-6">
"block c"
</div>
</div>
</div><!-- div for the right side abc pattern ends -->
</div><!-- row closed here -->
</div>