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>
Related
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>
I am trying to add a padding-bottom to an div class="col-md-4" directly without using css. Is it possible?
I tried this code
<div class="col-md-4 padding-bottom:15px">
also
<div class="col-md-4" "padding-bottom:15px">
full content code is
<div class="gal">
<div class="container">
<div class="col-md-12 no-padding">
<div class="row">
<div class="grid clearfix">
#foreach($albums as $album)
<div class="col-md-4">
<figure class="effect-julia"> <img src="{{$album->gallery->imageUrl(null,300,239)}}" alt="czcsdcsd -{{$album->name}}"/>
<figcaption>
<h2>{{$album->name}}</h2>
<div>
<p>View More</p>
</div>
View more </figcaption>
</figure>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
it does not change anything.please help
<div class="col-md-4" style="padding-bottom:15px"></div>
Just use the attribute style, but I have to say using CSS in the HTML directly is not the best way...
Also, you can use bs4 classes like pb-number for setting padding-bottom, or pt-number for setting padding-top where number is number from 0 to 5 (or auto) which is equivalent to values in rem from .25rem to 3rem.
In your case, you can use class="pb-1" for example.
You can find out more in the official documentation of bootstrap4:
my image does not display as the true size, I've also tried to embed height and width but that does not work either. any idea of the proper code to get my .png to display as the original size?
my code is ----->
<div class="divPanel notop nobottom">
<div class="row-fluid">
<div class="span12">
<div id="divLogo" class="center">
<a href="index-alt.html" id="divSiteTitle">
<img src="images/logo.png" alt="Tech Mule" class="img-circle" title="Tech Mule"/>
</a>
</div>
</div>
</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
I'm trying a web shop layout consisting in three columns:
| thumb | main image | description |
the thumbs column, contains three images that should be resized exactly to match the main image height. I'm using the img-responsive class but there are some minimal pixel differences when I display this layout on different sizes.
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-xs-3" id="prodThumbs">
<img src="http://placehold.it/170x255" class="img-responsive">
<img src="http://placehold.it/170x255" class="img-responsive">
<img src="http://placehold.it/170x255" class="img-responsive">
</div>
<div class="col-xs-9">
<img src="http://placehold.it/534x800" class="img-responsive">
</div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<h3>Price: 40,- €</h3>
<button type="button" class="btn-default">add to cart</button>
</div>
</div>
</div>
here is example http://jsfiddle.net/F6vtb/embedded/result/
Is there a better way to achieve this in bootstrap, so the images are perfectly aligned?
thanks
I think your best bet would just be to use a table instead of trying to use grid-columns. Grid-columns can be a pain to keep the same height.
DEMO