I am trying to make my portfolio responsive but having some issues with bootstrap.
I have 4 divs which should take up the width of the screen evenly. I have a class of row d-none d-sm-block on it. This should hide this set of divs and toggle my mobile view when the screen falls below 576 pixels. This seems to be working.
I also have a col-sm-3 on each of the 4 divs. This is looks like the problem. It supposed to take up the width evenly and it does - Until you get to a width of 770 pixels or below then the divs stack in 4 rows instead of one. When the width of the screen gets to about 760 pixels
Upon inspection it looks like the column is taking up the whole width of the screen for some reason. I can't figure out what the issue is. The entire website can be found on heroku. You'd have to scroll down to "Main Technology Stack":
https://mighty-ocean-12133.herokuapp.com/
Here's a code snippet of what I have:
<div className="container">
<div className="row d-none d-sm-block">
<div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'ReactJS')} onMouseLeave={this.fadeIn.bind(this, 'ReactJS')}>
<img width="100%" height="100%" src="/assets/ReactJS.png" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'AngularJS')} onMouseLeave={this.fadeIn.bind(this, 'AngularJS')}>
<img width="100%" height="100%" src="/assets/AngularJS.png" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'Java')} onMouseLeave={this.fadeIn.bind(this, 'Java')}>
<img width="100%" height="100%" src="/assets/Java.jpg" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-sm-3" onMouseOver={this.openBox.bind(this,'Accessibility')} onMouseLeave={this.fadeIn.bind(this, 'Accessibility')}>
<img width="100%" height="100%" src="/assets/Accessibility.png" alt=""></img>
</div>
</div>
<div className="row d-block d-sm-none">
<div style={{cursor: "pointer"}} className="col-md-3">
<img src="/assets/ReactJS.png" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-md-3">
<img src="/assets/AngularJS.png" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-md-3">
<img src="/assets/Java.jpg" alt=""></img>
</div>
<div style={{cursor: "pointer"}} className="col-md-3">
<img src="/assets/Accessibility.png" alt=""></img>
</div>
</div>
</div>
Any other random comments on my portfolio is appreciated as well.
Simply use d-flex flex-row with combination of justify-content-around or justify-content-between
I have used Bootstrap 4 here.
<body>
<div class="container-fluid bg-light">
<div class="col-12">
<div class="row d-flex flex-row justify-content-around">
<div class="border border-dark">
<img src="./images/reactjs.png" alt="" />
</div>
<div class="border border-dark">
<img src="./images/angularjs.png" alt="" />
</div>
<div class="border border-dark">
<img src="./images/java.png" alt="" />
</div>
<div class="border border-dark">
<img src="./images/accessibility.png" alt="" />
</div>
</div>
</div>
</div>
</body>
Hope it will help you.
Related
I have a bootstrap container which shows some images a two column layout. Since not all images have the same aspect ratio, it would be a pain to cut the images to the right ration. better to solve it in code.
My goal is to have all images of a container the same height. and the bigger image will resize to the height of the smaller. then the padding between images will be dynamic. I hope it is clear what I mean by this, otherwise let me know.
A hint from you is highly appreciated
-endo
Here is an example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container container-fluid">
<div class="row w-100">
<div class="col-lg-12">
<figure>
<img sizes="auto" alt="" src="http://placekitten.com/g/1500/1000" width="100%">
</figure>
</div>
</div>
<div class="row w-100 h-100">
<div class="col-8">
<figure>
<img class="img-responsive" sizes="auto" alt="" src="http://placekitten.com/g/4523/2262" width="100%">
</figure>
</div>
<div class="col-4">
<figure>
<img class="img-responsive" sizes="auto" alt="" src="http://placekitten.com/g/2100/3000" width="100%">
</figure>
</div>
</div>
<div class="row w-100">
<div class="col-lg-12">
<figure>
<img sizes="auto" alt="" src="http://placekitten.com/g/1500/1000" width="100%">
</figure>
</div>
</div>
</div>
My code is currently like this :
<div class="container h-auto">
<div class="flex border-8 border-red-900 w-56 h-auto">
<img class="h-autho w-auto" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
<img class="h-autho w-auto" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
which the images have exceeded the width of the div. I would like the images to auto reduce their size depending on the content inside the div so that they always fit the div. Is it possible?
I made three suggestions for you.
The first two are more specifically exactly for 2 images. Making them the same size with grid-cols-2 respectively w-1/2
The last one works with any number of images, flex-grow applied to all childs of a flex container makes them all the same width.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="container h-auto mb-4">
<div class="grid grid-cols-2 border-8 border-red-900 w-56 h-auto">
<img class="h-auto w-full" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
<img class="h-auto w-full" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
<div class="container h-auto mb-4">
<div class="flex border-8 border-red-900 w-56 h-auto">
<img class="w-1/2" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
<img class="w-1/2" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
<div class="container h-auto mb-4">
<div class="flex border-8 border-red-900 w-56 h-auto">
<div class="flex-grow">
<img class="w-full" src="https://i.picsum.photos/id/238/200/200.jpg?hmac=O4Jc6lqHVfaKVzLf8bWssNTbWzQoaRUC0TDXod9xDdM" />
</div>
<div class="flex-grow">
<img class="w-full" src=" https://i.picsum.photos/id/65/200/200.jpg?hmac=pZrTO_F80X2VYUVpgorpj6xM_WABGhjIXYieK__8B50" />
</div>
</div>
</div>
I am designing the asp.net bootstrap form. I have one div in it.
Code:
<div id="gallery">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a>
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" width="900" title="" alt="" rel="a" />
</a><a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" width="1000" title="" alt=""
rel="a" />
</a>
</div>
Css:
#gallery
{
position: relative;
height: 282px;
}
I wanted to make this div responsive using Bootstrap grid system. I am confused with div ie. How to apply grid system on div?
<div class="row">
<div class="col-sm-12">
<div class="gallery">
------contents------
</div>
</div>
</div>
Is it like this? I am new to Bootstrap. I just wanted to know how to apply grid system to div.
You can use the bootstrap grid like this.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="http://expogr.com/" target="_blank">
<img src="images/layout/777x282-africa-1.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="addlisting.aspx">
<img src="images/layout/becomeAMember.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a href="dubaiexhibitions.aspx">
<img src="images/layout/dubaiexportersexhibitions.jpg" class="img-responsive" alt="" rel="a" />
</a>
</div>
</div>
</div>
You can follow this link for further details. Bootstrap Grid
A general way to use grid system is
<div class="container">
<div class="row">
<div class="col-sm-3">Content1</div>
<div class="col-sm-3">Content2</div>
<div class="col-sm-3">Content3</div>
<div class="col-sm-3">Content4</div>
</div>
</div>
Every column will have equal width and it will act responsive. You don't need to set height or width of divs inside these columns unless you intentionally want it. If you can provide more details what exactly do you want , i can try to help more.
you can use the grid system of 12 spans and as many rows as you want as you have different spanning of images for different rows like this:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12"></div>
<a href="aboutus.aspx">
<img src="images/layout/exportsatdubai.jpg" class="img-responsive" alt=""/>
</a>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">...</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">...</div>
<div class="col-xs-6 col-md-6">.....</div>
</div>
.....
.....
and so on
</div>
I have been searching for ways to center a container in bootstrap and reduce gutter width but haven't been able to find a solution. I have a grid of images (2 rows, 3 columns) and I want to be able to reduce the width of the gutters between columns and add a horizontal gutter between the two rows. I would like to be able to center the grid.
<body>
<div class="container" width="400px" >
<div class='row'>
<div class="col-md-2">
<img class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/ width= '100px'>
</div>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
</div>
<div class='row'>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
<div class="col-md-2">
<img width= '100px' class='img-responsive' class="thumbnail" src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" />
</div>
</div>
</div>
Bootstrap has an offset that can be defined for each col.
You can wrap each row in a col-md-6 and give it an offset of 3.
Bootstrap does their grid with width percentages. So if your column is 6 wide, it will be 50% wide and a margin of 25% on each side will center the column.
<div class='row'>
<div class="col-md-6 col-md-offset-3">
<div class="col-md-2">
<img class='img-responsive' class="thumbnail"
src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg" width='100px'>
</div>
<div class="col-md-2">
<img width='100px' class='img-responsive' class="thumbnail"
src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/>
</div>
<div class="col-md-2">
<img width='100px' class='img-responsive' class="thumbnail"
src="http://www.hutterites.org/wp-content/uploads/2012/03/placeholder.jpg"/>
</div>
</div>
</div>
I recommend making a simple class to use where you need row padding.
.row-padded
{
margin-top:20px;
}
Same for removing spacing between columns.
.column-nospace
{
padding: 0 !important;
margin: 0 !important;
}
There will likely be times when you need Bootstrap to function as intended out of the box, so I recommend these over editing the core Bootstrap files.
Here is a fiddle that shows what you want (I think). https://jsfiddle.net/Gt25L/583/
I have 3 images within a row. Between each column, i'd like to add an arrow pointing to the next image.
How can I do this, while keep the existing images centered (so the middle one is in the middle of the page), and so it degrades nicely on smaller screens (disappears for instance)?
html:
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="col-sm-12" style="text-align: center;">EASY TO USE</h1>
<hr>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step1htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets/img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step2htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets//img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step3htc.mini.24.png" height="350px" width="240px" alt="">
</div>
</div>
</div>
</body>
</html>
EDIT: For clarification, I want to add arrows between the existing images in the html code above. The html/css above is already centered. Howver, i'd like to add 2 arrows between the 3 existing images.
EDIT: Please see this image to understand what I mean: http://imgur.com/YT2hnw4
EDIT: Changed html to show a full example, including css call.
Here you go
<div class="container">
<div class="row">
<h1 class="centered" style="text-align: center;">EASY TO USE</h1>
<hr>
<div class="col-md-3" style="margin-left:4.17%;">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets/img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets//img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
</div>
</div>
All i did is removed the extra col-md-1 class and instead added the margin of the same equivalance to the 1st element so that it stay in the center.