What I'm really looking for is two different designs to align my images according to. One for tablets (992 px) and up and one for smaller screens.
Ideally I want them to look like this:
This one:
Should shrink to:
That's just an ideal though, really any sort of symmetry would do so long as the red one (it's special) is displayed bottom center.
I'm having big problems getting the images to align in the center using Bootstrap's col-xx-y grid formatting. text-align: center seems to be the only way to get images to align centrally, which is weird. But it's very fidgety, so if I change anything the design breaks completely.
Here's what I have so far:
HTML:
<div class="container">
<div class="row centered categories">
<div class="col-md-12">
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 1</h4>
</div>
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 2</h4>
</div>
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 3</h4>
</div>
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 4</h4>
</div>
</div>
<div class="col-md-12">
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 5</h4>
</div>
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 6</h4>
</div>
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 7</h4>
</div>
</div>
<div class="col-lg-12">
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Special</h4>
</div>
</div>
</div>
</div>
CSS:
.centered {
text-align: center
}
.categories {
position:relative;
display: inline-block;
float:left;
}
.icon-cont {
display: inline-block;
text-align: center;
width: 125px;
margin-left: 25px;
margin-right: 25px;
}
.icon-cont img {
display: block;
margin-left: auto;
margin-right: auto;
}
Please see the fiddle here.
Is this a valid approach to this design? I'm worried I'm doing things totally wrong because it's so fidgety. For example, if I change col-md-12 to col-lg-12 it won't center at certain screen sizes (you have to zoom out to see this).
I'm thinking I would have to pair the icons up in smaller cols but they just won't work with me.
Give each one a column for each device ie
<div class="col-lg-4 col-xs-6">
etc etc
sorry this is short
here's something to read, when i get a chance i'll create a fiddle :)
http://getbootstrap.com/examples/grid/
EDIT:
Hi had a quick whack, this works without any css, just using twitter bootstrap built in columns
<body>
<div class="container">
<div class="row centered categories">
<div class="col-md-3 col-xs-12">
<center>
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 1</h4>
</div>
</center>
</div>
<div class="col-md-3 col-xs-6">
<center>
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 2</h4>
</div>
</center>
</div>
<div class="col-md-3 col-xs-6">
<center>
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 3</h4>
</div>
</center>
</div>
<div class="col-md-3 col-xs-6">
<center>
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 4</h4>
</div>
</center>
</div>
<div class="col-md-4 col-xs-6">
<center>
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 5</h4>
</div>
</center>
</div>
<div class="col-md-4 col-xs-6">
<center>
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 6</h4>
</div>
</center>
</div>
<div class="col-md-4 col-xs-6">
<center>
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Title 7</h4>
</div>
</center>
</div>
<div class="col-md-12">
<center>
<div class="icon-cont">
<img src="http://i.imgur.com/ZF9KgVk.png">
<h4>Special</h4>
</div>
</center>
</div>
</div>
Related
I need to made this div in bootstrap 3 as shows in image...
I need to display 4 icons/images in one row and another 4 icons in another row in smaller screen/mobile view..i dont know any error in my code..
please help me to make this as shown as in image.
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="col-md-2"></div>
<div class="col-md-1 text-center ">
<div class="im1">
<img src="/images/speaker.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Sound insultion</h6>
</div>
</div>
<div class="col-md-1 text-center" >
<div class="im1">
<img src="/images/renewable-energy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Save energy</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/window.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Prevent Dust Buildup</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/stormy.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Storm Resistant</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/umb.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Blocks Seepage</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/sun.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Thermal Insulation</h6>
</div>
</div>
<div class="col-md-1 text-center">
<div class="im1">
<img src="/images/maintenance.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Low maintenance</h6>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</section>
styles
.im1{
padding-top: 8px;
padding-left: 8px;
}
.siz{
width: 40px;
}
.textt{
font-size: 15px;
color:#ffffff;
font-family: 'Times New Roman', Times, serif !important;
}
Here is the image
how to make this image using bootstrap grid system...
I created a code for you. I hope it will help to you.
https://codepen.io/myco27/pen/OvMdGp
img{
width: 100%;
}
.img1{
width: calc(100% / 8);
float:left;
}
#media (max-width: 860px) {
.img1{
width: calc(100% / 4);
float:left;
}
}
<section class="container-fluid">
<div class="row" style="background-color:#034ea2;">
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
<div class="img1 text-center">
<img src="https://webfoundation.org/docs/2017/03/March-12-Letter.jpg" alt="1">
</div>
</div>
</section>
First bootstrap runs in a 12 grid sysytem that is defined or can be broken down into 2,3, or 4 segements...basically any divisor of 12. In your case, to get the first four images in a row (in a small device), we split the grid by 3 i.e "col-md-3" for each image wrapper and "col-lg-1" (for large devices) e.g using a snippet from your code
<div class="col-lg-1 col-md-3 text-center">
<div class="im1">
<img src="/images/hotel-elevator.png" alt="1" class="siz">
</div>
<div class="textt">
<h6>Elegant Looks</h6>
</div>
</div>
Then avoid splitting the grid at the main <div class="col-md-2"></div> wrapper, simply leave it as <div class="row justify-content-md-center"></div>.
This should work just fine.
NB: The number of images willbe only 8 in this container
For Your CSS is simply modify the following
.siz{
width: 100%;
}
Try This. it has 8 div in 1 row. as shown in image
<style>
.main{
background:#034da2;
}
</style>
<div class="col-md-12 main">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
<div class="col-md-3">
<img src="image" alt="your image"/>
</div>
</div>
</div>
</div>
</div>
</div>
I'm using bootstrap cards to build this layout on desktop:
So far so good, at this width everything is ok as well:
But from this width to desktop width the container is not filled:
The HTML to build the card with the images is:
<div class="card h-60">
<div>
<div class="row box">
<div class="box-content formal">
<div class="col-md-12">
<img class="imageban" src="img/crm.png" />
<span><b>CRM</b></span>
</div>
</div>
<div class="box-right">
<a href="#">
<img class="img-responsive" src="img/img1.jpg"/>
</a>
</div>
</div>
</div>
<div>
<div class="row box">
<div class="box-content report">
<div class="col-md-12">
<img class="imageban" src="img/report.png" />
<span><b>Report</b></span>
</div>
</div>
<div class="box-right">
<a href="#">
<img class="imageban" src="img/img4.jpg"/>
</a>
</div>
</div>
</div>
<div>
<div class="row box">
<div class="box-content formal">
<div class="col-md-12">
<img class="img-responsive" src="img/formal_notices.png" />
<span><b>Formal Notices</b></span>
</div>
</div>
<div class="box-content text">
<a href="#">
Open the Formal <br>Notice Document <br>Library
</a>
</div>
</div>
</div>
</div>
And the CSS is only this line:
.row.box{
max-width: 345px;
}
I'm stuck in this, any help would be nice. Thanks.
You can remove the class .box and use the Bootstrap classes instead col-md-4 col-xs-12.
My png images gets really small when I put them inside a column in a row. However they are fine when there is not column but then they do not appear as a row and appear one above the other. I have no idea what may be causing the problem.
What I want to do: I want them to appear like this.
<div class="container">
<div class="row" id="parent">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block left">
<div class="heading">
<h3> Simple to Enjoy </h3>
</div>
<div class="inside">
<div class="row">
<div class=""> <!--These Images!!!-->
<img class="img img-responsive img-sec-4" src="images\home_section_4_free_ride.png">
<p>Free Rides </p>
</div>
<div class="">
<img class="img img-responsive img-sec-4" src="images\home_section_4_membership.png">
<p>Free XXX Membership </p>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block center">
<div class="heading">
<h3> Simple to Earn </h3>
</div>
<div class="inside">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block right">
<div class="heading">
<h3> Simple to Save </h3>
</div>
<div class="inside">
</div>
</div>
</div>
</div>
Sorry for bad english and indent.
Here is my CSS:
#parent {
text-align:center;
height:400px;
width:100%;
}
.center {
margin:auto
}
.left {
margin:auto auto auto 0;
}
.right {
margin:auto 0 auto auto;
}
.img-sec-4 {
height: auto;
width: auto;
}
EDIT:
Here is the screenshot of my result:
(The red highlighted area is where the problem is)
simply add class col-xs-6 to the div wrapping those images (each one)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" id="parent">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block left">
<div class="heading">
<h3> Simple to Enjoy </h3>
</div>
<div class="inside">
<div class="row">
<div class="col-xs-6">
<!--These Images!!!-->
<img class="img img-responsive img-sec-4" src="//lorempixel.com/200/200">
<p>Free Rides</p>
</div>
<div class="col-xs-6">
<img class="img img-responsive img-sec-4" src="//lorempixel.com/200/200">
<p>Free XXX Membership</p>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block center">
<div class="heading">
<h3> Simple to Earn </h3>
</div>
<div class="inside">
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block right">
<div class="heading">
<h3> Simple to Save </h3>
</div>
<div class="inside">
</div>
</div>
</div>
</div>
I have two rows on a webpage: on the first row, the image is on left side and text on right side. For the second row, it's vice versa. When I see the page on a mobile device, the image which is on the left goes on top of the text and the image on the right side goes to the bottom of the text.
I want all images to be at the top of the text, whether it is on the right or the left side of the screen.
How should I do that?
HTML code
<section class="pagecontent first_row" id="pagecontent">
<div class="container">
<div class="row">
<div class="col-md-5 text-center animated wow fadeInLeft">
<div class="iphone1">
<img src="images/image1.png" alt="" titl="">
</div>
</div>
<div class="col-md-7 animated wow fadeInRight">
<div class="features_list1">
<h1 class="text-uppercase">Text on Right</h1>
<p>Some text</p>
</div>
</div>
</div>
<hr class="style3">
</div>
</section>
<section class="pagecontent second_row" id="pagecontent">
<div class="container">
<div class="row">
<div class="col-md-7 animated wow fadeInLeft">
<div class="features_list1">
<h1 class="text-uppercase">Text on Left</h1>
<p>Some text</p>
</div>
</div>
<div class="col-md-5 text-center animated wow fadeInRight">
<div class="iphone1">
<img src="images/image2.png" alt="" titl="">
</div>
</div>
</div>
<hr class="style3">
</div>
</section>
Some CSS code
.pagecontent .iphone1{
max-width: 359px;
position: relative;
display: inline-block;
text-align: center;
}
.pagecontent .iphone1 img{
width: 100%;
height: auto;
padding-bottom: 15px;
}
.pagecontent .features_list1 p{
color: #767272;
font-family: "open_regular", Helvetica, Arial, sans-serif;
font-size: 14px;
margin-bottom: 19px;
text-align: justify;
}
Any help would be useful.
col-push-* and col-pull-* can help you
<div class="container">
<div class="row">
<div class="col-md-5 text-center animated wow fadeInRight col-md-push-7">
<div class="iphone1">
<img src="http://placehold.it/150x150" alt="" titl="">
</div>
</div>
<div class="col-md-7 animated wow fadeInLeft col-md-pull-5">
<div class="features_list1">
<h1 class="text-uppercase">Text on Left</h1>
<p>Some text</p>
</div>
</div>
</div>
</div>
You can see that in JSFiddle
I have divided my grid system following way.
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="slider"></div>
<!--divided column into 6/6-->
<div class="col-md-6">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail" />
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
</div>
<div class="col-md-6">
<p>some content with image</p>
</div>
</div>
<div class="col-md-4">
some content plus image
</div>
</div>
</div>
My problem is I can't set 3 images in that div because of less width. Can any one tell how I can make it work. If I am doing any think wrong in my grid system please guide me.
Thank you
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="slider"></div>
<!--divided column into 6/6-->
<div class="col-md-6">
<div class="col-md-4">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail" />
</div>
<div class="col-md-4">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
</div>
<div class="col-md-4">
<img src="img/2.jpg" style="width: 150px;height: 150px;" class="img-thumbnail"/>
</div>
</div>
<div class="col-md-6">
<p>some content with image</p>
</div>
</div>
<div class="col-md-4">
some content plus image
</div>
</div>
Hope This will work..
You can use with to adding a custom class
.thumb_img .img-thumbnail{
width:32%;
padding:4px;
margin-right:1%;
float:left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="slider"></div>
<!--divided column into 6/6-->
<div class="col-md-6 thumb_img">
<div class="row">
<img src="img/2.jpg" class="img-thumbnail img-responsive" />
<img src="img/2.jpg" class="img-thumbnail img-responsive" />
<img src="img/2.jpg" class="img-thumbnail img-responsive" />
</div>
</div>
<div class="col-md-6">
<p>some content with image</p>
</div>
</div>
</div>
</div>
Not a 100% sure about your question but..
1) you can only nest col-'s in row's. i.e:
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
2) each time you've divided a row in multiple columns, then inside the nested row you have 12 columns available again. i.e:
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
Or you can create 3 columns inside a row:
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
I.e. 4 * 3 = 12 columns.