I'm trying to build a 2 column responsive layout using bootstrap.
This is the relevant code
<div class="content">
<div class="container-fluid">
<div class="row">
<span id="campaign-description-section"
class="section campaign-description-section
col-xs-12 col-sm-12 col-md-push-6 col-lg-push-6 col-md-6 col-lg-6">
Campaign Description Section
</span>
<span id="shirt-styles-section"
class="section shirt-styles-section
col-xs-12 col-sm-12 col-md-pull-6 col-lg-pull-6 col-md-6 col-lg-6">
Shirt Styles Section
</span>
<span id="color-size-section"
class="section color-size-section
col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
Color Size Section
</span>
<span id="price-section"
class="section price-section
col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
Price Section
</span>
<span id="attention-banner"
class="section attention-banner
col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
Attention Banner Section
</span>
</div>
</div>
<div class="container-fluid">
<div id="quality-section" class="section quality-section row">Quality Section</div>
</div>
<div class="container-fluid">
<div id="designers-section" class="section designers-section row">Designers Section</div>
</div>
<div class="container-fluid">
<div id="footer" class="section footer row">Footer</div>
</div>
</div>
what im tryin to get is
what im getting
on the mobile layout im getting what im striving for which is this
here is the code pen
.section {
border-color: red;
border-style: solid;
}
.color-size-section {
background-color: darkviolet;
height: 200px;
}
.campaign-description-section {
height: 200px;
}
.price-section {
background-color: aqua;
}
.shirt-styles-section {
background-color: lightgray;
color: red;
height: 500px;
}
.attention-banner {
background-color: green;
}
.quality-section {
background-color: lawngreen;
}
.designers-section {
background-color: yellowgreen;
}
.footer {
background-color: black;
}
<html class="">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<link rel="canonical" href="http://codepen.io/anon/pen/EjxQjP">
<link rel="stylesheet prefetch" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<!--#region Header Section-->
<div class="">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Explore
</li>
<li>Design
</li>
</ul>
</div>
</nav>
</div>
<!--#endregion Header Sections-->
<div class="content">
<div class="container-fluid">
<div class="row">
<div>
<div id="shirt-styles-section" class="section shirt-styles-section
col-xs-12 col-sm-12 col-md-pull-6 col-lg-pull-6 col-md-6 col-lg-6" style='right:0%; margin-bottom: 46px;'>
Shirt Styles Section
</div>
<div id="campaign-description-section" class="section campaign-description-section
col-xs-12 col-sm-12 col-md-push-6 col-lg-push-6 col-md-6 col-lg-6" style='left:0%'>
Campaign Description Section
</div>
<div id="color-size-section" class="section color-size-section
col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6" style='left:0%'>
Color Size Section
</div>
</div>
<div id="price-section" class="section price-section
col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
Price Section
</div>
<div id="attention-banner" class="section attention-banner
col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
Attention Banner Section
</div>
</div>
<div class="container-fluid">
<div id="quality-section" class="section quality-section row">Quality Section</div>
</div>
<div class="container-fluid">
<div id="designers-section" class="section designers-section row">Designers Section</div>
</div>
<div class="container-fluid">
<div id="footer" class="section footer row">Footer</div>
</div>
</div>
<script src="http://codepen.io/assets/editor/live/css_live_reload_init.js"></script>
</body>
</html>
try this
My sugestion its to rethink the structure of your HTML markup to be more clear.
I forked your code to show you my example
<div class="left-side col-md-6 col-sm-12">
<div id="shirt-styles-section" class="section shirt-styles-section">
Shirt Styles Section
</div>
</div>
<div class="right-side col-md-6 col-sm-12">
<div id="campaign-description-section" class="section campaign-description-section">
Campaign Description Section
</div>
<div id="color-size-section" class="section color-size-section">
Color Size Section
</div>
</div>
<div id="price-section" class="section price-section col-sm-12 col-md-push-6 col-md-6">
Price Section
</div>
<div id="attention-banner" class="section attention-banner col-sm-12 col-md-push-6 col-md-6">
Attention Banner Section
</div>
.section {
border-color: red;
border-style: solid;
}
.left-side, .right-side{
padding: 0;
}
.color-size-section {
background-color: darkviolet;
height: 200px;
}
.campaign-description-section {
height: 200px;
}
.price-section {
background-color: aqua;
}
.shirt-styles-section {
background-color: lightgray;
color: red;
height: 500px;
}
.attention-banner {
background-color: green;
}
.quality-section {
background-color: lawngreen;
}
.designers-section {
background-color: yellowgreen;
}
.footer {
background-color: black;
}
<html class=""><head>
<style>
.section {
border-color: red;
border-style: solid;
}
.color-size-section {
background-color: darkviolet;
height: 200px;
}
.campaign-description-section {
height: 200px;
}
.price-section {
background-color: aqua;
}
.shirt-styles-section {
background-color: lightgray;
color: red;
height: 500px;
}
.attention-banner {
background-color: green;
}
.quality-section {
background-color: lawngreen;
}
.designers-section {
background-color: yellowgreen;
}
.footer {
background-color: black;
}
</style>
<style>
#color-size-section
{
}
#price-section{
}
#media screen and (max-width: 991px) {
#color-size-section
{
width:50%;
float:50%;
}
#price-section{
width:50%;
}
}
</style>
</head>
<body>
<meta charset="UTF-8">
<meta name="robots" content="noindex">
<link rel="canonical" href="http://codepen.io/anon/pen/EjxQjP">
<link rel="stylesheet prefetch" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!--#region Header Section-->
<div class="">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Explore
</li>
<li>Design
</li>
</ul>
</div>
</nav>
</div>
<!--#endregion Header Sections-->
<div class="content">
<div class="container-fluid">
<div class="row">
<div>
<div id="shirt-styles-section" class="section shirt-styles-section
col-xs-12 col-sm-12 col-md-pull-6 col-lg-pull-6 col-md-6 col-lg-6" style="right:0%; margin-bottom: 46px;">
Shirt Styles Section
</div>
<div id="campaign-description-section" class="section campaign-description-section
col-xs-12 col-sm-12 col-md-push-6 col-lg-push-6 col-md-6 col-lg-6" style="left:0%">
Campaign Description Section
</div>
<div id="color-size-section" class="section color-size-section
col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6" style="left:0%">
Color Size Section
</div>
</div>
<div id="price-section" class="section price-section
col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
Price Section
</div>
<div id="attention-banner" class="section attention-banner
col-xs-12 col-sm-12 col-lg-push-6 col-md-push-6 col-md-6 col-lg-6">
Attention Banner Section
</div>
</div>
<div class="container-fluid">
<div id="quality-section" class="section quality-section row">Quality Section</div>
</div>
<div class="container-fluid">
<div id="designers-section" class="section designers-section row">Designers Section</div>
</div>
<div class="container-fluid">
<div id="footer" class="section footer row">Footer</div>
</div>
</div>
<script src="http://codepen.io/assets/editor/live/css_live_reload_init.js"></script>
<script type="text/javascript">
</script>
</div></body></html>
Related
I created a bootstrap grid that has 3 rows with the following layout.
All I'm trying to do is add a bit of margin between them but as you can see, the columns and rows are not longer properly aligned.
Is there a way to fix it or maybe there's a better way to achieve what I want?
#featured {
margin-bottom: 15px;
}
.featured-1 {
height: 200px;
}
.featured-2 {
height: 50%;
margin-left: 5px;
}
.featured-3 {
height: 50%;
margin-left: 5px;
margin-top: 5px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row featured-1" id="featured">
<div class="col-md-7 col-sm-12 bg-warning">
Featured 1
</div>
<div class="col-md-5">
<div class="row featured-2">
<div class="col-md-12 col-sm-12 bg-danger">
Featured 2
</div>
</div>
<div class="row featured-3">
<div class="col-md-12 col-sm-12 bg-success">
Featured 3
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 bg-primary">For reference</div>
</div>
</div>
The official bootstrap document recommended the use of Gutter.
you can do this like below:
.featured-1 {
height: 200px;
}
.featured-2, .featured-3 {
height: 50%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row featured-1" id="featured">
<div class="col-md-7 col-sm-12 bg-warning">
Featured 1
</div>
<div class="col-md-5 px-4">
<div class="row featured-2">
<div class="col-md-12 col-sm-12 bg-danger">
Featured 2
</div>
</div>
<div class="row featured-3">
<div class="col-md-12 col-sm-12 bg-success gy-2">
Featured 3
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-primary gy-2">For reference</div>
</div>
</div>
There's already padding on the columns, which acts as gutters. I'd put the background on your column content instead.
#featured {
margin-bottom: 15px;
}
.featured-1>div {
height: 200px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div class="container">
<div class="row" id="featured">
<div class="col-7 featured-1">
<div class="bg-warning">Featured 1</div>
</div>
<div class="col-5 d-flex flex-column">
<div class="featured-2 flex-grow-1 bg-danger mb-1">Featured 2</div>
<div class="featured-3 flex-grow-1 bg-success mt-1">Featured 3</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="bg-primary">For reference</div>
</div>
</div>
</div>
May I ask how to fix this? I need the second container to be at the bottom of the first container, and I do not know how to solve it. I have used display: flex but it seems it does not feel right and applicable in two containers, that is why I am having a trouble on how to fix it:
https://jsfiddle.net/0nv2oLqy/1/
.content {
display: flex;
}
aside {
border-right: 1px solid #000000;
}
aside {
height: 100vh;
width: 350px;
}
aside ul {
padding-top: 5%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: block;
font-size: 23px;
color: black;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
.first {
margin: 50px;
}
.first a {
background-color: #ebe0dd;
padding: 4px;
}
.line {
padding: 8px;
border-bottom: 1px solid $color5;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<div class="content">
<aside class="d-none d-md-block">
<ul>
<li class="first">All</li>
<li>To Pay</li>
<li>To Ship</li>
<li>To Receive</li>
<li>Completed</li>
<li>Cancelled</li>
</ul>
</aside>
<div class="container-fluid p-3 m-5 item1" height="20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
<div class="container-fluid p-3 m-5 item2" height="20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
</div>
Just wrap them inside a new div
.content {
display:flex;
}
aside {
border-right: 1px solid #000000;
}
aside {
height: 100vh;
width: 350px;
}
aside ul {
padding-top: 5%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: block;
font-size: 23px;
color: black;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
.first {
margin: 50px;
}
.first a {
background-color: #ebe0dd;
padding: 4px;
}
.line {
padding: 8px;
border-bottom: 1px solid $color5;
}
.rightDiv {
width: 100%;
}
<!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.0">
<title>Document</title>
<!--Link for Font awesome icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/styles/try.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div class = "content">
<aside class = "d-none d-md-block">
<ul>
<li class = "first">All</li>
<li>To Pay</li>
<li>To Ship</li>
<li>To Receive</li>
<li>Completed</li>
<li>Cancelled</li>
</ul>
</aside>
<div class='rightDiv'>
<div class="container-fluid p-3 item1" height = "20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
<div class="container-fluid p-3 item2" height = "20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
keep that .content {display: flex} but try to add a new container for that two price column or that two container you mentioned in question and then add this ruleset .your-class { display:flex; flex-direction: column; }
After reading some threads, I managed to use the 'flex' class to remove the random blank spaces. But I've tried everything and now I am tired of this. I cannot get rid of these random spaces. Can anyone please point out what's going wrong in this?
.jumbotron {
margin-top: 80px;
padding-left: 40px;
background: #0d2d60;
color: white;
}
.image {
width: 100%;
height: 250px;
background-size: cover;
background-position: center;
}
.image1 {
background-image: url("https://source.unsplash.com/MYlvxeye9J0");
}
.image2 {
background-image: url("https://source.unsplash.com/KxCq-xveKcU");
}
.image3 {
background-image: url("https://source.unsplash.com/CKQG961UaWo");
}
.image4 {
background-image: url("https://source.unsplash.com/yySQipYW6Y4");
}
.image5 {
background-image: url("https://source.unsplash.com/ZtTkB3LmlNw");
}
.image6 {
background-image: url("https://source.unsplash.com/NdBsn0WQadw");
}
.image7 {
background-image: url("https://source.unsplash.com/lIa03ti94ec");
}
.image8 {
background-image: url("https://source.unsplash.com/k5wF1D_1rjo");
}
.image9 {
background-image: url("https://source.unsplash.com/Jd8hr75moLc");
}
body {
background: #081935;
}
.navbar {
background: #0d2d60;
color: white;
border-bottom: 0;
}
.flex {
display: flex;
flex-wrap: wrap;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="#"><span aria-hidden="true" class="glyphicon glyphicon-camera"></span> IMGS</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About Us
</li>
<li>
Contact
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Sign Up
</li>
<li>
Login
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron container">
<h1><span class="glyphicon glyphicon-camera"></span> The Image Gallery</h1>
<p>A bunch of beautiful images that I didn't take</p>
</div>
<div class="container">
<div class="row flex">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image1"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image2"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image3"></div>
</div>
</div>
</div>
<div class="row flex">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image4"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image5"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image6"></div>
</div>
</div>
</div>
<div class="row flex">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image7"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image8"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail">
<div class="image image9"></div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
Random Space between the Images
On screen size sm and x-sm
Works perfectly If the sceen size is large
I see a couple of problems:
1) Unrelated, loading jquery twice
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
[...]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
2) There is a problem in the code for small size (sm):
There are 3 divs with col-sm-6 and the sum of them should be 12 but 3x6 = 18, that's why third image gets on its own line.
3) For resolutions less than 768px wide or so, the col-md-* gets applied, i think you need xs cols if you need specific for this case.
More info in the docs: Boostrap 3 - Grid
I placed your code in jsfiddle using a bootstrap boiler plate and I'm assuming that you're wanting to remove the padding between the images?
By default Boostrap's .col- classes have padding-left and padding-right styles.
If you add this to your CSS it will remove the padding:
.col-lg-4, .col-md-4, .col-sm-6 {
padding: 0px;
}
However, this will change column padding sitewide. It is not recommended that you set global styles for columns. My recommendation would be to create a CSS class like "img-no-padding" and add that class to those columns.
Here is a jsfiddle demonstrating this.
Ok guys, I found an exact solution for this problem after some more research. #emsimpson It was not about the padding or margin. The problem was with the bootsrap 12 container grid.
As mentioned by #August : There is a problem in the code for small size (sm): There are 3 divs with col-sm-6 and the sum of them should be 12 but 3x6 = 18, that's why third image gets on its own line.
But I found a solution for that too. Flex deals with this problem.
.flex
{
display: flex;
flex-wrap: wrap;
}
As you can see, I have used the flex class but it didn't work. So I nested all of my columns under one single row with class flex and it tackled the problem. Bootstrap will know when to move the columns to the next row based on accumulated size.
<div class="container">
<div class="row flex">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image1"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image2"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image3"></div>
</div>
</div>
<!-- </div> -->
<!-- <div class="row flex"> -->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image4"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image5"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image6"></div>
</div>
</div>
<!-- </div> -->
<!-- <div class="row flex"> -->
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image7"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image8"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<div class="image image9"></div>
</div>
</div>
<!-- </div> -->
</div>
</div>
I need to align TEXT of container-fluid at same padding/margin like container.
You have example in this image:
EDIT: See 2nd photo, i want that padding to be the same on container-fluid / container, and when you minimize screen to be responsive..
.nopadding {
margin: 0 !important;
padding: 0 !important;
}
.bg {
background-color: #f3f3f3;
}
.left {
height: 650px;
}
.img-bg {
margin-right: 0px !important;
height: 650px;
background: url(http://placehold.it/850x650) no-repeat center center;
background-size: cover;
}
<section id="id1">
<div class="container-fluid">
<div class="row">
<div class="col-md-7 nopadding bg">
<div class="left">
<h2>TEXT</h2>
</div>
</div>
<div class="col-md-5 nopadding img-bg">
</div>
</div>
</div>
</section>
Here is my solution:
HTML part:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 image no-padding">
<div class="full-width"></div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text no-padding center-flex">
<p>Text</p>
</div>
</div>
</div>
CSS part:
.center-flex {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
.container-fluid .text {
background: #515467;
height: 650px;
}
.container .text {
background: #737373;
height: 300px;
}
.container-fluid .image {
background: #2D2D2D;
height: 650px;
}
.full-width {
width:100%;
height:100%;
height:calc(100% - 1px);
background-image:url('http://placehold.it/850x650');
background-size:cover;
}
.full-width img {
width:100%;
}
.no-padding {
padding: 0 !important;
}
.no-margin {
margin: 0 !important;
}
You can see the jsfiddle result: https://jsfiddle.net/DTcHh/18725/
try with this below code it may help you
.text1{
background : #0f74bd;
padding : 50px;
color : white;
font-weight : bold;
}
.image{
background : #000;
padding : 50px;
color : white;
font-weight : bold;
}
.text{
background : #9ea3a9;
padding : 50px;
color : white;
font-weight : bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6 text1">
TEXT1
</div>
<div class="col-sm-6 col-md-6 col-xs-6 image">
IMAGE
</div>
</div>
</div>
<div class="container text">
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT2
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT3
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT2
</div>
<div class="col-sm-6 col-md-6 col-xs-6">
TEXT3
</div>
</div>
</div>
</section>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
</head>
<body>
<div style="background-color: blue" class="container-fluid">
<h1 style="text-align:center">Container-Fluid</h1>
<div class="row">
<div style="text-align:center" class="col-xs-6">TEXT 1</div>
<div style="text-align:center" class="col-xs-6">IMAGE</div>
</div>
<div style="background-color: yellow" class="container">
<h1 style="text-align:center">Container</h1>
<div class="row">
<div style="text-align:center" class="col-xs-6">Text 1</div>
<div style="text-align:center" class="col-xs-6">Text 2</div>
<div style="text-align:center" class="col-xs-6">Text 3</div>
<div style="text-align:center" class="col-xs-6">Text 4</div>
</div>
</div>
</div>
</body>
</html>
Is this what u want, using bootstrap
I use bootstrap and want to locate three div's as shown below.
Could you please give a sample demo that can meet this requirement?
If it is possible, it would be better to use bootstrap.css?
Thanks in advance.
Html:
<!-- Navigation -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
UseBootstrap
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-6 portfolio-item">
<div class="panel panel-primary" style="height:325px !important;">
<div class="panel-heading">
<h3 class="panel-title" id="panel-title">AAAAAAAAAAAAAA<span class="anchorjs-icon"></span></h3>
</div>
<div>
Content AAAAAAAA
</div>
</div>
</div>
<div class="col-md-6 portfolio-item">
<div class="panel panel-primary" style="height:325px !important;">
<div class="panel-heading">
<h3 class="panel-title" id="panel-title">BBBBBBBBBBBBBBBB<span class="anchorjs-icon"></span></h3>
</div>
<div>
Content BBBBBBBBBBB
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 portfolio-item">
<div class="panel panel-primary" style="height:325px !important;">
<div class="panel-heading">
<h3 class="panel-title" id="panel-title">CCCCCCCCCCCCCCCCCCCC<span class="anchorjs-icon"></span></h3>
</div>
<div>
Content CCCCCCCCCCC
</div>
</div>
</div>
<div class="col-md-6 portfolio-item">
<div class="panel panel-primary" style="height:325px !important;">
<div class="panel-heading">
<h3 class="panel-title" id="panel-title">DDDDDDDDDDDDDDDDDDD<span class="anchorjs-icon"></span></h3>
</div>
<div>
Content DDDDDDDDDDD
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Footer -->
<footer>
</footer>
Try the below code;
body {
text-align: center;
}
#header,
#footer {
border: 2px solid green;
padding: 10px;
color: green;
font-size: 1.5em;
margin: 10px auto;
}
#lhs {
border: 2px solid red;
height: 300px;
}
#rhs1,
#rhs2 {
border: 2px solid blue;
height: 140px;
margin-bottom: 20px;
}
#rhs2 {
margin-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<header>
<div class="container" id="header">
Header
</div>
</header>
<div class="container">
<div class="row">
<div class="col-xs-6">
<div id="lhs">
left hand side
</div>
</div>
<div class="col-xs-6">
<div id="rhs1">
Right hand side Up
</div>
<div id="rhs2">
Right hand side Down
</div>
</div>
</div>
</div>
<footer>
<div class="container" id="footer">
Footer
</div>
</footer>
This goes to rowspan, as far as display:table doesn't support rowspan property for me best solution is to use our old friend table
here take a look
http://jsfiddle.net/myzL761q/
Something like that?
<header class="row"></header>
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12"></div>
<div class="col-lg-12"></div>
</div>
</div>
</div>
<footer class="row"></footer>
Actually, here http://getbootstrap.com/css/#grid everything is written and I recommend you to read it before asking questions next time)