Here is the code:
<div class="row" >
<div id="box1" class="col-lg-4 box"style="">
<img src="images/1.png" style="" class="num-img">
box 1 content
</div>
<div id="box2" class="col-lg-4 box" style="">
<img src="images/2.png" style="" class="num-img">
box 2 content
</div>
<div id="box3" class="col-lg-4 box" style="">
<img src="images/3.png" style="" class="num-img">
box 3 content
</div>
</div>
CSS of the box:
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
}
This is how I want it to look like:
This is how it looks right now :
And this is how it looks when I remove the box class and write:
<div id="box1" class="col-lg-4 "style="">
How do I fix this??
Update (after adding margin:0 auto):
You are possibly overriding the width of the col-lg-4 divs, depending on when your box css is loaded. Try
<div id="box1" class="col-lg-4">
<div class="box">
<img src="images/1.png" style="" class="num-img">
box 1 content
</div>
</div>
This will not force the col-lg-4 div to have a set px width, but instead a % with the inner div having a set width.
If you want to center the blocks within the bootstrap cols, add margin: 0 auto; to your box css.
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
margin: 0 auto;
}
example using your fiddle
Add col-offset-2 with all col classes and you will see change. change col-offset-2 as per requirement.
Or you can wrap the box in a column like this..
<div class="row" >
<div id="box1" class="col-lg-4"style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 1 content
</div>
</div>
<div id="box2" class="col-lg-4" style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 2 content
</div>
</div>
<div id="box3" class="col-lg-4" style="">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 3 content
</div>
</div>
</div>
Please check this:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.box
{
height: 130px;
width: 200px;
background-color: #000;
color: #FFF;
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="row" >
<div id="box1" class="col-lg-4 text-center">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 1 content
</div>
</div>
<div id="box2" class="col-lg-4 text-center" style="">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 2 content
</div>
</div>
<div id="box3" class="col-lg-4 text-center" style="">
<div class="box" style = "display:inline-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Paris_m_2_jms.svg/50px-Paris_m_2_jms.svg.png" style="" class="num-img">
box 3 content
</div>
</div>
</div>
</body>
</html>
CodePen:http://codepen.io/anon/pen/ZbOKKw
Related
Need to align four different height (beetween 160-180px) svg images with text under them.
Images should be placed in line at sight and I don't know how to make strict align short text under them in one line like on screenshot.
Thanks!
UPD: Sorry for inconvinient information, thought that this question is quite typical for those who know css good.
Here is my html and css. Also I'm using bootstrap rows.
<div class="did-you-know">
<div class="row items">
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-wa.svg"/>
</div>
<div class="title text-poppins">
<p>We’re from WA</p>
<p>{like you!}</p>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-packaging.svg"/>
</div>
<div class="title text-poppins">
<p>We use minimal packaging</p>
<p>{great for the planet}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-quality.svg"/>
</div>
<div class="title text-poppins">
<p>We only choose quality</p>
<p>{better for your health}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-community.svg"/>
</div>
<div class="title text-poppins">
<p>We love giving back</p>
<p>{great for our community}</p></div>
</div>
</div>
</div>
.did-you-know {
padding: 20px;
text-align: center;
}
.did-you-know .items .icon {
padding: 50px;
}
.did-you-know .items .title {
font-size: 20px;
}
here is a solution:
Replace images by your images.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Snow" style="width:100%">
<p style='text-align: center;'>test1</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Forest" style="width:100%">
<p style='text-align: center;'>test2</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
</div>
</body>
</html>
How can I align the picture with the text?
Many thanks in advance
<div class="w3-container" style="padding:128px 16px" id="about">
<h1 class="w3-center w3-knallpink"><b>#about</b></h1>
<div class="w3-row">
<div class="w3-container w3-center w3-third">
<img src="/bilder/Spongebob.png" alt="Bikini Bottom" style="width:100%;max-width:360px; margin-left: auto;
margin-right: auto; border-radius: 3px;">
</div>
<div class="w3-container w3-twothird">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>
</p>
</div></div> </div>
To achieve expected result, add margin-top:15px , as the paragraph text has margin-top:15px
codepen for reference - https://codepen.io/nagasai/pen/dqLNNo
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container" style="padding:128px 16px" id="about">
<h1 class="w3-center w3-knallpink"><b>#about</b></h1>
<div class="w3-row">
<div class="w3-container w3-center w3-third">
<img src="https://tse2.mm.bing.net/th?id=OIP.MhyD6cHgUgRSnYMrQ8TomQHaGI&pid=15.1&P=0&w=183&h=153" alt="Bikini Bottom" style="width:100%;max-width:360px; margin-left: auto;
margin-right: auto; border-radius: 3px;margin-top:15px">
</div>
<div class="w3-container w3-twothird">
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>
TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXT<p>
</p>
</div></div> </div>
I have problem with my footer. I am using ASP.NET Core 2 MVC, with Razor View.
Right now I tryed everything from this, including comments:
https://css-tricks.com/couple-takes-sticky-footer/ & https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
Note, that I do not want fixed footer. I know that there is several similar topics in SO, but I tryed already everything I found. I belive that I am missig something obvoius. I work on this whole day already and it just stops me.
Every time my footer is rendered just below Edit, Delete buttons, or somewhere in the middle of page. I am guessing that it might be something with my _Layout architecutre or for in Index file is causing ot somehow.
My _Layout.cshtml looks like this:
<div class="wrapper">
<div class="header">
<!--HEADER-->
</div>
<div class="content">
<!--BODY-->
#RenderBody()
</div>
<div class="footer">
<!--FOOTER-->
<footer>
<div></div>
</footer>
</div>
</div>
My Index.cshtml looks like (for most of the cases footer was rendered below Edit/Delete form:
<div>
#if (Context.User.Identity.IsAuthenticated)
{
<a asp-action="Create" class="btn btn-sm btn-primary adminBtn">Add new project</a>
}
<div>
#foreach (var item in Model)
{
<div class="projectContainer col-lg-6">
#if (Context.User.Identity.IsAuthenticated)
{
<form asp-action="Delete" method="post">
<a asp-action="Edit" class="btn btn-sm btn-warning"
asp-route-projectID="#item.ProjectID">
Edit
</a>
<input type="hidden" name="ProjectID" value="#item.ProjectID" />
<button type="submit" class="btn btn-danger btn-sm">
Delete
</button>
</form>
}
<div class="innerContainer" style="background-color: #item.BackColor">
<div class="projectHeader col-xs-12">
#item.Name
</div>
<div class="hyperButton col-xs-12">
<a asp-action="Details" asp-route-projectID="#item.ProjectID">See more ></a>
</div>
<div class="projectPictures col-xs-12">
<a asp-action="Details" asp-route-projectID="#item.ProjectID"><img src="#item.PictureUrl" asp-append-version="true" /></a>
</div>
</div>
</div>
}
</div>
</div>
My site.css looks like that right now:
html, body {
height: 100%;
overflow-x: hidden;
}
body {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
UPDATE with source code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link href="/src/lib/fontawesome/css/all.css" rel="stylesheet" />
<link rel="stylesheet" href="/src/lib/bootstrap/css/bootstrap.min.css">
<script src="/src/lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/dist/site.css" />
<style>
.input-validation-error {
border-color: red;
background-color: #fee;
}
</style>
<title>
Przemyslaw Bak - My projects
</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<!--HEADER-->
<div class="mainHeader">
<div class="helloTextContainer col-12">
<div class="helloTxtWrapper">Hi! I am</div>
</div>
<div class="mainTextContainer col-sm-9 col-xs-12">
<div class="mainTxtWrapper">Przemyslaw Bak {developer}</div>
</div>
<div class="socialContainer col-sm-3 hidden-sm-down">
<!--VIEW COMPONENT-->
<i class="fab fa-facebook-square"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-github-square"></i>
</div>
</div>
<div class="mainNavbar">
<div><a class="mainButton projects" href="/">my projects</a></div>
<div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
<div><a class="mainButton about" href="/Literature">literature</a></div>
<div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
</div>
<div class="stickyNavbar">
<div><a class="mainButton projects" href="/">my projects</a></div>
<div><a class="mainButton technologies" href="/MyTechnologies">technologies</a></div>
<div><a class="mainButton about" href="/Literature">literature</a></div>
<div><a class="mainButton contact" href="/ContactMe">about and contact</a></div>
</div>
<!--HERE TRIGGERS APP.JS-->
<div class="emptySpace" id="app"></div>
</div>
<!--BODY-->
<div class="content">
<!--button-->
<style>
.projects {
color: gray !important;
}
</style>
<div>
<div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #E8E8E8">
<div class="projectHeader col-xs-12">
Name of the project
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="#" />
</div>
</div>
</div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #fafafa">
<div class="projectHeader col-xs-12">
Name of the project
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" />
</div>
</div>
</div>
<div class="projectContainer col-lg-6">
<div class="innerContainer" style="background-color: #f9fbf8">
<div class="projectHeader col-xs-12">
Best project ever
</div>
<div class="hyperButton col-xs-12">
See more >
</div>
<div class="projectPictures col-xs-12">
<img src="/src/img/website1.png?v=pdiYJ15drelz9-8uTNfrtUab7HjRkk9REgc4EOUOLHU" />
</div>
</div>
</div>
</div>
</div>
</div>
<!--FOOTER-->
<div class="footer">
<footer>
<div class="footText">© 2018 - Przemyslaw Bak</div>
</footer>
</div>
</div>
<!--SCRIPTS-->
<script src="/dist/bundle.js"></script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
</body>
</html>
Currently after scrolling down my footer looks like this (2018 - Przemyslaw Bak):
UPDATE2:
I am using Bootstrap 4, maybe it changes something
Take out that position: absolute; in the footer CSS
.footer {
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
html, body {
height: 100%;
overflow-x: hidden;
}
body {
min-height: 100%;
position: relative;
}
.footer {
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
<div class="wrapper">
<div class="header">
<!--HEADER-->
</div>
<div class="content">
<!--BODY-->
<p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p><p>#RenderBody()</p>
</div>
<div class="footer">
<!--FOOTER-->
<footer>
<div>Div inside footer</div>
</footer>
</div>
</div>
if you using bootstrap 4 there good solition for you,
https://getbootstrap.com/docs/4.0/utilities/flex/#align-self
you need self item end if you wanna use to bootstrap I think you should be use this.
After Viktor`s comments I stripped out my HTML code and started to suspect, that my Bootstrap (previously 4.0.6) is messing up something.
So I started to Google "flush footer bootstrap" and I found this:
Flush footer to the bottom of the page in bootstrap 4
After installation Bootstrap 4.1.X files, I changed my site.css and _Layout.cshtml as follows:
body, wrapper {
min-height: 100vh;
}
footer {
width: 100%;
background-image: url(/src/img/footBG.png);
background-repeat: repeat;
border-top: 3px solid #557DA8;
height: 75px;
text-align: center;
}
.footText {
font-size: 20px;
position: relative;
top: 20px;
}
_Layout.cshtml:
<body>
<wrapper class="d-flex flex-column">
//nav bar
//render body
<main class="container-fluid py-3 flex-fill">
#RenderBody()
</main>
//footer
<footer>
<div class="footText">© #DateTime.Now.Year - Przemyslaw Bak</div>
</footer>
</wrapper>
//scripts
</body>
And it works!
All the code can be found in the JS fiddle below I thought it would be easier that way. I am trying to display the Flexbox items horizontally, so that the first 8 and 4 columns are beside each other.
I then want to add the 12 on a totally new line, underneath the 8 and 4 and not beside it, extending the pages length horiztonally and having that horrible scroll.
What have I tried?
.container {
display: flex; /* or inline-flex */
}
So the above code just makes it all go side by side, no matter how many columns you do or if it exceeds 12, I want it to work pretty much exactly like bootstraps grid system if that makes sense.
https://jsfiddle.net/d35g2mra/1/
Wrap only the wanted divs in div and dispaly:flex them (in the same way you can wrap the images section if you want to)
body {
background-color: whitesmoke;
font-family: sans-serif;
margin: 0;
}
#nav {
background-color: #333;
color: #ffff;
padding: 16px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
.wrap{
display:flex;
}
<!DOCTYPE html>
<html lang="en-GB">
<div id="nav">
<div class="container">
<div class="col-md-12">
lol
</div>
</div>
</div>
<div class="container"><br><br><br>
<div class="wrap">
<div class="col-md-8">
I need to put a pretty picture here.
</div>
<div class="col-md-4">
I will place some sort of box here.
</div>
</div>
<hr>
<br>
<div class="col-md-12">
Trending Pages
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
</div>
</div>
You can do like this:
body {
background-color: whitesmoke;
font-family: sans-serif;
margin: 0;
overflow-x:hidden;
}
#nav {
background-color: #333;
color: #ffff;
padding: 16px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
<html lang="en-GB">
<head>
<title>{{ config('website.name') }}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.css" type="text/css">
</head>
<body>
<div id="nav">
<div class="container">
<div class="col-md-12">
lol
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
<div class="col-md-4">
I will place some sort of box here.
</div>
</div>
<hr>
<div class="container">
<div class="col-md-12">
<span>Trending Pages</span>
<div class="row">
<div class="col-md-2">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2"><img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png"></div>
<div class="col-md-2">
<img src="https://phpsocial.com/demo/thumb/a/112/112/1171031268_435428908_1738535611.png">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
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>