I have multiple columns in a single div without row. I achieved to move the column down if its has title . But next div can't comes automatically to right side.
<div class="secn-frst1">
<div class="col-sm-3 col-xs-6">
<h3>no title</h3>
//content
</div>
<div class="col-sm-3 col-xs-6">
<h3>have title</h3>
//content
</div>
<div class="col-sm-3 col-xs-6">
<h3>no title</h3>
//content
</div>
<div class="col-sm-3 col-xs-6">
<h3>no title</h3>
//content
</div>
<div class="col-sm-3 col-xs-6">
//have title
</div>
</div>
<div class="secn-frst2">
<div class="col-sm-3 col-xs-6">
<h3>no title</h3>
//content
</div>
<div class="col-sm-3 col-xs-6">
<h3>have title</h3>
//content
</div>
<div class="col-sm-3 col-xs-6">
<h3>no title</h3>
//content
</div>
<div class="col-sm-3 col-xs-6">
//have title
</div>
</div>
I applied display:block and clear:both for col-xs-6 to move down if it has title (for 2nd column) but the 3rd column not coming to right side like left and right. I need to do this without row because of all column should randomly appears to left and right.
Here my site
screen for ref
Divide each sections with titles with a container-fuild and add a row.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div class="container-fluid">
<div class="secn-frst1">
<div class="col-sm-3 col-xs-6">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-12744.png">
</div>
</div>
</div>
<div class="container-fluid">
<h3>have title</h3>
<div class="col-sm-3 col-xs-6">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-12744.png">
</div>
<div class="col-sm-3 col-xs-6">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-12744.png">
</div>
<div class="col-sm-3 col-xs-6">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-12744.png">
</div>
</div>
<div class="container-fluid">
<h3>have title</h3>
<div class="col-sm-3 col-xs-6">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-12744.png">
</div>
</div>
<hr>
<div class="container-fluid">
<div class="secn-frst2">
<div class="col-sm-3 col-xs-6">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-12744.png">
</div>
</div>
</div>
<div class="container-fluid">
<h3>have title</h3>
<div class="col-sm-3 col-xs-6">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-12744.png"> </div>
<div class="col-sm-3 col-xs-6">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-12744.png"> </div>
</div>
<div class="container-fluid">
<h3>have title</h3>
<div class="col-sm-3 col-xs-6">
<img src="http://mobilegear.my/alphatiles/assets_user/product/alpha_2018-01-12744.png">
</div>
</div>
Related
I am stuck at a point where i dont know where to go....I am trying to create a grid system for my website but not getting the desired output.
Here is the output structure which i want to create using Bootstrap 4:
My Code :
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-sm-4">
Some text here
</div>
<div class="col-sm-8">
<img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
Some Text Here
</div>
</div>
</div>
</section>
I will appreciate it if someone guide me the right direction.Have lack of knowledge about bootstrap grid system and column classes.
If you change both col-sm-4 to col-12 you will get two full width columns inside your row.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-12">
Some text here
</div>
<div class="col-12">
<img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
Some Text Here
</div>
</div>
</div>
</section>
You can divide your section / container into two columns (left/right) and then the right column into rows (text/image)
Something like below (see demo)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<!-- left column -->
<div class="col-xs-4">
<img src="https://placekitten.com/200/300" class="img-fluid" alt="Responsive image">
</div>
<!-- right column -->
<div class="col-xs-8">
<!-- first row -->
<div class="row">
<div class="col">
some text only on right column
</div>
</div>
<!-- second row -->
<div class="row">
<div class="col">
<img src="https://placekitten.com/300/100" class="img-fluid" alt="Resp. img">
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="row">
<div class="col-xs-12">
footer text that goes the width of the container
</div>
</div>
</div>
</section>
With this code when the width of the container is less than 792px the content of the div with the class 'col-xs-6' disappear.
<div class="cont">
<div class="top">
<div class="col-md-3 text-center col-xs-6">
<small>id:</small>
0001
</div>
<div class="col-md-3 text-center col-xs-6">
<small>reference:</small>
PRJ1
</div>
<div class="col-md-3 text-center">
<small>name:</small>
Project 1
</div>
</div>
</div>
how can I display it?
add class name row to top class
<div class="cont">
<div class="top row">
<div class="col-md-3 text-center col-xs-6">
<small>id:</small>
0001
</div>
<div class="col-md-3 text-center col-xs-6">
<small>reference:</small>
PRJ1
</div>
<div class="col-md-3 text-center">
<small>name:</small>
Project 1
</div>
</div>
</div>
I am trying to create a layout shown below:
C1 C2 C3
C4 C5 C3
C6 C7 C3
I am having trouble trying to have a column fill the height of all three rows.
This is the code I have tried.
<div class="container">
<div class="row equal">
<div class="col-sm-6 lgImage">
</div>
</div>
</div>
<div class="container">
<div class="row equal">
<div class="col-sm-3">
Location:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
No. of Frames:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
More Info:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
</div>
with this css:
.lgImage {
background-image: url('TL/TL001/tl002.01-07-2017.13.50.00.jpg');
right: 0;
position: absolute;
}
This code doesn't work
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.lgImage {
background-image: url('TL/TL001/tl002.01-07-2017.13.50.00.jpg');
}
.column{height:100px; line-height:100px; background-color:#e5e5e5; text-align:center; margin-bottom:10px;}
.sidebar_div{height:320px; line-height:300px; background-color:#e5e5e5; text-align:center; margin-bottom:10px;}
</style>
</head>
<body>
<div class="container">
<div class="row equal">
<div class="col-sm-6 lgImage">
</div>
</div>
</div>
<div class="container">
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="row equal">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c1
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c2
</div>
</div>
</div>
<div class="row equal">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c4
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c5
</div>
</div>
</div>
<div class="row equal">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c6
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="column">
c7
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="sidebar_div">
c3
</div>
</div>
</div>
</body>
</html>
This fill surely helps you to get what your requirement was:
HTML:-
<section class="col-md-8">
<div class="col-md-6">CL1</div>
<div class="col-md-6">CL2</div>
<div class="col-md-6">CL4</div>
<div class="col-md-6">CL5</div>
<div class="col-md-6">CL6</div>
<div class="col-md-6">CL7</div>
</section>
<aside class="col-md-4">
<div class="col-md-12">CL3</div>
</aside>
Is this what you need?
.lgImage {
background-image: url('http://placehold.it/800x50');
right: 0;
position: relative;
width: 800px;
height: 50px;
}
.row.equal {
display: flex;
justify-content: space-around;
}
<div class="container">
<div class="row equal">
<div class="col-sm-6 lgImage">
</div>
</div>
</div>
<div class="container">
<div class="row equal">
<div class="col-sm-3">
Location:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
No. of Frames:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
<div class="row equal">
<div class="col-sm-3">
More Info:
</div>
<div class="col-sm-3">
Placeholder
</div>
</div>
</div>
I creating simple post list with thumbnails.
I have created this code:
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
but on FullHD (1920px) I getting values for col-sm-* - why?
http://prntscr.com/an1097
This is because there is no over-riding column offset above for viewports above col-sm. Meaning that your page will display as the 6 central columns with the three column offset - even on larger screens.
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3">
you will need to add the following (col-md-offset-0) to each of the parent divs to prevent the offset in -md and -lg and to allow the two divs to display side by side:
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-0">
I just tested this and it now works and displays the columns side by side - look at the code snippet in action (in full screen mode - the columns are adjacent and in the small window they stack vertically. Note that I added coloured backgrounds to demonstrate the point.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:red">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-sm-offset-3 col-sm-offset-0" style="background:blue">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<div class="news">
<div class="news-thumb text-center">
<img src="images/NewsThumb.png" alt="" class="img-responsive" />
</div>
<div class="news-excerpt">
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
I have a footer on my website with six content blocks.
Depending on the breakpoints, I want to have them in 1x6, 2x3 or 3x2 format.
Without the push and pull classes, the blocks raster is working well on all breakpoints.
But you can imaging that I want to reorder some blocks if it flips from 3x2 to 2x3 format.
<!-- footer -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
</div>
<div class="col-sm-6 col-md-4">
</div>
<div class="col-sm-6 col-sm-push-6 col-md-4">
</div>
<div class="clearfix hidden-sm"></div>
<div class="col-sm-6 col-sm-pull-6 col-md-4">
</div>
<div class="col-sm-6 col-md-4">
</div>
<div class="col-sm-6 col-md-4">
</div>
</div>
</div>
</div>
In SM mode the reordering works fine.
But in LG mode it is still executing the col-sm-push-6 command because it push the 3th div out of the screen.
Is col-sm-push-6 not SM only?
You have to use col-md-push-0 / col-md-pull-0 to "reset" the push/pull for the other grid sizes..
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="well"> </div>
</div>
<div class="col-sm-6 col-md-4">
<div class="well"> </div>
</div>
<div class="col-sm-6 col-sm-push-6 col-md-4 col-md-push-0">
<div class="well"> </div>
</div>
<div class="clearfix hidden-sm"></div>
<div class="col-sm-6 col-sm-pull-6 col-md-4 col-md-pull-0">
<div class="well"> </div>
</div>
<div class="col-sm-6 col-md-4">
<div class="well"> </div>
</div>
<div class="col-sm-6 col-md-4">
<div class="well"> </div>
</div>
</div>
</div>
http://www.bootply.com/126837