I am building a website to display images in an specific grid. I am using Laravel and Bootstrap for this project.
The goal is to create a grid with spacing that maintains the images heights. To create a space between the divs I added a border right to the images, but when I do that it also creates a border bottom at the first two divs, which makes the first two images have a smaller height than the last one.:
Image: https://gyazo.com/9bd97d19073a123966a652e3603ebfd4
[![As you can see the first two rectangles have a border bottom instead of just the border-right]
For reference this is the kind of grid that I am trying to create:
https://gyazo.com/337d9e044a56e327e0c7e69069ae5c17
https://www.zarahome.com/pt/%C3%BAltima-semana/cole%C3%A7%C3%A3o-c1020095502.html
This is the code I have so far:
<div class="row g-0 mx-0">
<div class="col-md-3">
<img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid" style="border-right: 10px solid white;">
</div>
<div class="col-md-3">
<img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid style="border-right: 10px solid white;">
</div>
<div class="col-md-6">
<img src="https://i.ibb.co/r5LDwny/imageonline-co-placeholder-image-3.jpg" alt="" class="img-fluid" style="border-right: 10px solid white;">
</div>
</div>
I simply dont understand why adding a border-right also adds a border-bottom. I tried adding a margin instead but this causes the bigger image to jump out of the row, like so:https://gyazo.com/5a785de16398756021dd843ba038cbc6
Could someone help me to achieve this result?
https://gyazo.com/337d9e044a56e327e0c7e69069ae5c17
I am assuming you are using Bootstrap 4 to create this since in your tags it shows bootstrap-4. The reason why your code would not work is that g-0 comes from Bootstrap 5. It might have been that you looked at the Bootstrap v5 documentation.
If you are using bootstrap 4 then you can add no-gutters to the div containing row.
To keep the images the same height I'd add some custom css and add the 40vh in there.
I have made an example for you to take a look at:
https://www.codeply.com/p/BqPXPxcP2j
A coleague helped me achieve the best solution, so I will post what sworked in case someone faces the same issue:
<div class="d-row d-flex gap-2 justify-content-center" style="margin-bottom: 100px">
<div class="col-md-3">
<img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-3">
<img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-6">
<img src="https://i.ibb.co/r5LDwny/imageonline-co-placeholder-image-3.jpg" alt="" class="img-fluid">
</div>
</div>
Related
I am having trouble centering the columns on bootstrap when the screen is sm or xs.
The fiddle is here https://jsfiddle.net/iggyfiddle/DTcHh/34028/. Here is what I am talking about:
When the screen is large (or medium), I have no problem. It appears centered.
When the screen starts to get smaller, it starts to become noticeable. If you notice, the whole column stack leans to the left, leaving some space on the right (I added red bg for emphasis. Hard to tell when bg is white).
When screen is xs, it is even more noticeable. Note that everything is leaning to the left, leaving a lot of space on the right.
I saw a popular SO post that addressed similar issue here. The solution suggested float: none; margin: 0 auto;, which I did - but it didn't do anything. I also tried adding center-block class, but the result is still nothing.
What do I have to do to center my columns? My goal is on xs screen, I want to have one column stacked up. When it is on sm screen, I want to have two columns, side-by-side, stacked. Anything larger should have 4 adjacent columns.
It's because you're using a width on the .card. Adding margin: 0 auto to the .card class will solve your issue.
I also tried adding center-block class, but the result is still nothing.
That's because you're using bootstrap 3.0. .center-block was added in bootstrap 3.1. If you can upgrade to 3.1 (or even better, the current release 3.3.7), .center-block fixes it.
If not, you can use #media (max-width: 992px) { .card { margin: auto; } }
I used both in my solution below.
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.col-centered {
margin: 0 auto;
}
#media (max-width: 992px) {
.col-centered .card {
margin: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 col-centered center-block">
<div class="card center-block" style="width: 200px;">
<img class="card-img-top img-circle img-responsive" style="margin:0 auto;" src="http://placekitten.com/g/150/150" alt="Card image cap">
<div class="card-block">
<h4 class="card-title text-center">Card title 1</h4>
<p class="card-text text-justify">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 col-centered center-block">
<div class="card center-block" style="width: 200px;">
<div class="card-block">
<h4 class="card-title text-center">Card title 2</h4>
<p class="card-text text-justify">Omnichannel CPM call-to-action low hanging fruit branding. Inbound holistic tweens dynamic content branding granular. Mission critical lean content snackable content drone inbound. Leading the pack buzzword flat design click bait B2C conversions millennials. Alignment pass the clap content marketing multiple points of entry context.</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 col-centered center-block">
<div class="card" style="width: 200px;">
<img class="card-img-top img-circle img-responsive" style="margin:0 auto;" src="http://placekitten.com/g/150/150" alt="Card image cap">
<div class="card-block">
<h4 class="card-title text-center">Card title 3</h4>
<p class="card-text text-justify">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 col-centered center-block">
<div class="card" style="width: 200px;">
<div class="card-block">
<h4 class="card-title text-center">Card title 4</h4>
<p class="card-text text-justify">Conversions buzzword trending brand voice B2C curated ideation. Branding user-friendly hashtag tablet click-through rate disrupt iterative. CRM alignment The Cloud visibility taste makers. CRM snackable content engagement millennials. Content marketing integrated big data. Tablet shoptimization intuitive top influencers reaching out.</p>
</div>
</div>
</div>
</div>
You have used fixed hieght 200px, I just run the code in fiddle. If you remove height:200px; and use .text-center class with card-block section then everything will be centered. But the main issue is you have used bootstrap-3.0.0, use the latest version of Bootstrap the issue will be fixed instantly....
i think it's a duplicate of this link
Since v3.0.1 Bootstrap has a built-in class named center-block that uses margin: 0 auto but is missing float:none. You can add that to your CSS to make it work with the grid system.
check the above link may be helpfull for you.
I'm new to html/css and am trying to make a straight-forward webpage, which is just several images centered horizontally, each on their own row. I ended up using Bootstrap's basic html template, and can't figure out what's wrong with the code below. My images are stuck on the left edge of the page. The only CSS I'm currently using is the default linked one: "css/bootstrap.min.css"
This is all that's currently in my body:
<div class=“container-fluid”>
<div class=“row”>
<img src="..." class=“img-responsive center-block”>
</div>
<div class=“row”>
<img src="..." class=“img-responsive center-block”>
</div>
</div>
Your quotation marks ("") seem to be broken in your img's class. Don't know what your actually using but change them to normal quotation marks and it should work.
<div class="container-fluid">
<div class="row">
<img src="..." class="img-responsive center-block">
</div>
<div class="row">
<img src="..." class="img-responsive center-block">
</div>
</div>
Please check this HTML template first Clippinghand
My problem is on what we provide's content below. There is first image then posts and next is first post then image like that 6 Element i took. On Computer type devices things are okay but when I'm going to make it responsive for mobile or tab devices it's making problem and the problem is images and content are getting closer i just always want to make them top of the posts I mean i want my images top of the post all of, How could i do that? Is there any trick ? Also How i can Do complete this section with only one custom post ?
Here is an example on image
You can use Column Ordering via Push + Pull which is built into Bootstrap. You'll have to reorder your content to achieve this. Here a good article also.
Basically stack the column content in the opposite order and apply push and pull classes. (*instead of content 1 then content 2, stack content 2, then content 1 inside your col-md-6). See working example and it will be illustrated.
.red {
background: red;
}
.blue {
background: lightblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<section id="our-services">
<div class="container">
<div class="row red">
<div class="col-md-6">
<div class="img-one">
<img src="http://placehold.it/350x150" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="content-one">
<h4>Background Remove</h4>
<em>Price starts from $0.49</em>
<p>This is the most demandable and most used image editing service all over the world for ecommerce product selling. Don’t worry, we make it easy to ensure all your images fit your ecommerce image editing guideline. We resize, crop, remove borders,
and remove image background turning it to pure white, transparent or color background as per your guideline.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row blue">
<div class="col-md-6 col-md-push-6">
<div class="img-two">
<img src="http://placehold.it/350x150" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<div class="content-two">
<h4>Web-ready Images</h4>
<em>Price starts from $1</em>
<p>For web-shop owners, we introduce our additional delivery of web-ready images. Add the image specifications (like crop size 800×800 px ) and we will deliver web-ready image. We can fulfill the image size requirements for any ecommerce platform
like Amazon, eBay, Shopify, bigcommerce, volusion, squarespace etc.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row red">
<div class="col-md-6">
<div class="img-three">
<img src="http://placehold.it/350x150" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6">
<div class="content-three">
<h4>Multiple Mask</h4>
<em>Price starts from $2</em>
<p>If you want to separate and modify different parts and features of the same product including its color, shape, and size, Multipath is the service you can take from us. We can deliver images with Alpha Channel, Layer Mask or Only Path.</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row blue">
<div class="col-md-6 col-md-push-6">
<div class="img-four">
<img src="http://placehold.it/350x150" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<div class="content-four">
<h4>COLOR MATCHING</h4>
<em>Price starts from $2</em>
<p>You have many different color variations of the same product but do not want to spend time taking photos of each one of them? No worries! You don’t have to. We can change the color and size of the same product as per your instruction to save
you from investing more of your time and money in taking photos.</p>
</div>
</div>
</div>
</div>
</section>
<!-- End of Our services area -->
Look here: http://jsfiddle.net/mwvfteuq/
In two words, you need to place your divs in the order you want them to appear on the smallest screen. For wider devices you can play with float set to left or right (pull-left and pull-right in bootstrap) to customize elements position in a row. Revoke those properties using media queries for the smallest screen.
For example:
HTML (using bootstrap)
<div class="row">
<div class="col-sm-6 pull-right right">img</div>
<div class="col-sm-6">some stuff</div>
</div>
<div class="row">
<div class="col-sm-6">img</div>
<div class="col-sm-6">some stuff</div>
</div>
CSS
#media (max-width: 768px) {
div.right{
float:none !important;
}
}
Do not forget to use !important to override bootstrap pull-right property
Is there an effective way to make a aesthetic grid look (1px borders all around cols like a table) while still having a row and column code.
For Example If I have this:
<div class="row">
<div class="tri-block col-lg-3 col-md-3 col-sm-4 col-xs-12">
<h4>Title</h4>
<img src="" alt="" />
<span>Description</span>
</div>
<div class="tri-block col-lg-3 col-md-3 col-sm-4 col-xs-12">
<h4>Title</h4>
<img src="" alt="" />
<span>Description</span>
</div>
...
</div>
I would like to have a grid looking border around things. If I add the CSS:
.tri-block {min-height:250px; padding:15px; text-align:center; border:1px solid #ddd;}
I get something close but I of course get double borders where the col touch. Is there a way to achieve this look that I am missing? My reason for this is because I still want the responsive breakdown and don't want to have a table I have to throw a "table-responsive" class on.
Still brand new to CSS, so please be gentle ;). I have a grid setup like the following:
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x150" class="img-responsive">
</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x150" class="img-responsive">
</a>
</div>
</div>
The problem is when I actually fill the src with an image, I want the image to actually compeltely "fill" the placeholder no matter what the image size is. I guess in other words, a ratio should be applied so it fills the 150x150? The width (max-width: 100%) is fitting, but the height is auto. I've tried adjusting height, width, max-height, etc. with no success.
I'm also new to bootstrap. I must have been messing with this longer than I should have but basically here is what I found works
You want to have a custom stylesheet that you load after bootstrap's css so you can make custom adjustments without destroying the original css. You can then make the adjustments:
.thumbnail-image {
overflow: hidden;
height: 150px;
}
.thumbnail-image > img {
width: 100%;
}
So then I sandwiched the image inbetween a div with the "thumbnail-image" class in the HTML.
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image"><img src="http://placehold.it/150x150"></div>
</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image"><img src="http://placehold.it/150x150"></div>
</a>
</div>
</div>
As column sizes adjust at the breakpoints you would have to do some similar adjustments regarding the custom height property of the custom .thumbnail-image class but other than that this is what I came up with!
Try adding height and width attributes within the image tag like so:
<img src="..." height="150" width="150">
Not sure how this'll interact with bootstrap's responsive image class. Best practice would be to actually insert an image which has the correct dimensions.