I'm trying to make a block of 3 images, 2 are of the same size and 1 has double the width of the rest of them. I've searched here similar questions but they didn't work for me.
how to use no margin image side image in html, css <-- not working, tried another similar question too
HTML5 code is:
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="images/favicon.png">
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-reboot.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.blockUI.js"></script>
</head>
<div class="container-fluid" style="max-height: 450px; max-width: 1380px;margin:0;padding:0;"><!-- tried without margin/padding as well -->
<div class="row">
<div class="col-3">
<img src="images/2.jpg" class="img-fluid" style="margin:0;padding:0;" />
</div>
<div class="col-3">
<img src="images/1.jpg" class="img-fluid" style="margin:0;padding:0;"/>
</div>
<div class="col-6">
<img src="images/3.jpg" class="img-fluid" style="margin:0;padding:0;"/>
</div>
</div>
</div>
Tried without margins/padding too with no results. I'm using Bootstrap 4 as base CSS, I currently have another CSS sheet i can edit if needed. It seems some CSS sheet is creating the margin after the other CSS is being applied but i can't seem to find it.
(https://imgur.com/a/wHkil2k)
What do you mean? The gaps between images you saw are the paddings from the columns. If you don't want them, simply adding bootstrap class .no-gutters on the .row element, per https://getbootstrap.com/docs/4.1/layout/grid/#no-gutters.
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-3">
<img src="images/2.jpg" class="img-fluid" />
</div>
<div class="col-3">
<img src="images/1.jpg" class="img-fluid"/>
</div>
<div class="col-6">
<img src="images/3.jpg" class="img-fluid" />
</div>
</div>
</div>
fiddle: http://jsfiddle.net/aq9Laaew/158414/
Related
This question already has an answer here:
Bootstrap 5 - Card Element Alignment on the Bottom
(1 answer)
Closed last year.
Okay so I'm trying to align the last two elements in the card so that the first one (button) can be on the left, and another element (Div with multiple social icon images) on the right side. How can I achieve that?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="card col-8 position-absolute top-50 start-50 translate-middle">
<div class="row g-0">
<div class="col-md-4">
<img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
</div>
<div class="col-md-8">
<div class="card-body position-relative">
<h2 class="card-title" style="font-weight: bold;">John Doe</h5>
<h6 class="card-subtitle pb-3">Developer</h5>
<p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="row justify-content-between">
Portfolio
<div class="col-10">
<img src="/bootstrap-icons-1.7.2/facebook.svg" alt="Facebook Icon" width="32" height="32">
<img src="/bootstrap-icons-1.7.2/instagram.svg" alt="Instagram Icon" width="32" height="32">
<img src="/bootstrap-icons-1.7.2/linkedin.svg" alt="Linkedin Icon" width="32" height="32">
<img src="/bootstrap-icons-1.7.2/twitter.svg" alt="Twitter Icon" width="32" height="32">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
This is will work for your images also, but I imported font-awesome icons for your social media, as your images were not rendering. Essentially, all I added was a div col-4 for your a tag and used col-8 for your social media icons. Then I used text-end on your social icons to align them to the right. I also added align-items-center so they are in line.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<body>
<div class="card col-8">
<div class="row g-0">
<div class="col-md-4">
<img src="Logo.png" class="img-fluid rounded-start" alt="Logo">
</div>
<div class="col-md-8">
<div class="card-body position-relative">
<h2 class="card-title" style="font-weight: bold;">John Doe</h5>
<h6 class="card-subtitle pb-3">Developer</h5>
<p class="card-text pb-3">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="row align-items-center justify-content-between">
<div class="col-4">
Portfolio
</div>
<div class="col-8 text-end">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
I am unable to stretch the image to full width till right corner. it should be responsive. My code is integrated in wordpress. You can see the image in class membershipImgBox. So How can I increase the size of my image.
The code as follows.
.membershipbox {
height: 100%;
}
.img-fluid {
max-width: 100%;
height: auto;
}
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<!-- for icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css" />
</head>
<section class="deliveringSection ">
<div class="container">
<div class="row">
<div class="col-lg-6 col-xs-12 img-box-2" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
<div id="img-2" class="membershipImgBox">
<img src="https://via.placeholder.com/987/FF0000/FFFFFF?Text=Down.com%20C/O%20https://placeholder.com/" class="img-fluid d-block mb-5 mb-lg-0 mx-auto" alt="" />
</div>
</div>
<div class="col-lg-6 col-xs-12 order-lg-first" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
<div class="deliveringContent">
<div class="sectionHeading" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
<h2>
Delivering quality projects to
</h2>
</div>
<div class="sectionHeadingTwo" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
<h2><b>World Class </b></h2>
<h2>Standards</h2>
<div class="about-border"></div>
</div>
<p>We work around three important elements of our business to create world-class innovative interior design solutions to meet our clients’ functional & aesthetic requirements providing unique tailored space solutions. We integrate the client’s
brand and business strategy, placing great emphasis on the brand’s values and aspirations to bring projects to fruition, taking our strong working relationship to the next level..</p>
about us
</p>
</div>
</div>
</div>
</div>
</div>
</section>
because it is inside a container class which have max-width and some margin so your image will not go outside it's container
you could put the image outside container and it will stretch to the edges of the page
.membershipbox {
height: 100%;
}
.img-fluid {
max-width: 100%;
height: auto;
}
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<!-- for icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.4.1/font/bootstrap-icons.css" />
</head>
<section class="deliveringSection ">
<div id="img-2" class="membershipImgBox">
<img src="https://via.placeholder.com/987x612" class="img-fluid d-block mb-5 mb-lg-0 mx-auto" alt="" />
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-xs-12 img-box-2" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
</div>
<div class="col-lg-6 col-xs-12 order-lg-first" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
<div class="deliveringContent">
<div class="sectionHeading" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
<h2>
Delivering quality projects to
</h2>
</div>
<div class="sectionHeadingTwo" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
<h2><b>World Class </b></h2>
<h2>Standards</h2>
<div class="about-border"></div>
</div>
<p>We work</p>
about us
</p>
</div>
</div>
</div>
</div>
</div>
</section>
I have an img nested in a col. However, the col is larger than the image. It's as if there is padding at the bottom, but I don't see any. Here is a screenshot: https://imgur.com/a/K8iRWLf
There is another img nested within a separate col in the same row, but that img is the exact same size.
EDIT* I tried two fixes per a suggestion: display: block and vertical-align: bottom (separately), neither of which worked.
.img-shrink {
max-width: 80%;
max-height: 80%;
}
<div class="row justify-content-center">
<div class="col-3 body-padding text-center">
<img class="img-fluid img-shrink" src="img/dog-beer.jpg" alt="beer">
</div>
<div class="col-3 body-padding text-center">
<img class="img-fluid img-shrink" src="img/dog-treats.jpg" alt="treats">
</div>
</div>
<div class="row justify-content-center">
<div class="col-2 align-text-top">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
<div class="col-2 align-text-top">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
</div>
After playing around, I figured it out. The col is sized to the actual size of my image, not the max-width/height: 80% image that the browser renders. If anyone knows a way around this without resizing the original image, please enlighten me.
Try this once and see if it works
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="row justify-content-center">
<div class="col-3">
<img class="img-fluid" src="img.jpg" alt="beer">
</div>
<div class="col-3">
<img class="img-fluid" src="image.jpg" alt="treats">
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 align-text-top text-center">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
<div class="col-3 align-text-top text-center">
<h4 class="product-header">Lorem Ipsum</h4>
</div>
</div>
</body>
</html>
I think I looked everywhere and tried everything.
I want to make a footer for a website with 3 columns - in each one there's h4 header and image (png icon). Instead of getting 3 columns I got 1 column with everything stacked under each other.
HTML code:
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Instagram</h4>
<a href="#" target="_blank"/><img src="img/instagram.png"/></a>
</div>
<div class="col-sm-4">
<h4>Facebook</h4>
<a href="#" target="_blank"/><img src="img/facebook.png"/></a>
</div>
<div class="col-sm-4">
<h4>LinkedIn</h4>
<a href="#" target="_blank"/><img src="img/linkedin.png"/></a>
</div>
</div>
</div>
</div>
Any reason why? Thanks in advance.
The reason why you are not getting the results you expect from bootstrap is likely due to you missing a resource.
Please make sure that you have the following included in the section of your document.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
CodePen example: https://codepen.io/CapySloth/pen/gRGNxa
Replace all entities of <a href="#" target="_blank"/> with <a href="#" target="_blank"> and will be happy!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Instagram</h4>
<img src="img/instagram.png"/>
</div>
<div class="col-sm-4">
<h4>Facebook</h4>
<img src="img/facebook.png"/>
</div>
<div class="col-sm-4">
<h4>LinkedIn</h4>
<img src="img/linkedin.png"/>
</div>
</div>
</div>
</div>
1st:
<a href="#" target="_blank"/><img src="img/instagram.png"/></a>
Should be
<img src="img/instagram.png">
For img there is not need to close it with / REF: Do I need a "/" at the end of an <img> or <br> tag, etc.?
2nd: use col-xs-4 if you want them to always be 3 item in one row. (all screen size will fall into the xs if nothing else is defined (lg/md/sm etc))
3rd: could be your reference not setup properly. try those:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs-4">
<h4>Instagram</h4>
<img src="img/instagram.png">
</div>
<div class="col-xs-4">
<h4>Facebook</h4>
<img src="img/facebook.png">
</div>
<div class="col-xs-4">
<h4>LinkedIn</h4>
<img src="img/linkedin.png">
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="http://placehold.it/150x150" class="img-responsive title-logo"></div>
<div class="col-md-6 text-right text-uppercase title-thin">
<h1>Trevor Cleworth</h1>
<h3>Junior Web Developer</h3>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1400x350" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Featured Work</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
<div class="col-md-3">
<img src="http://placehold.it/220x220" class="img-responsive">
<h3>Appify</h3>
<p>Click to see</p>
</div>
</div>
</div>
This is the code that is connected with my CSS file, the font family will work but the font weight will not, does anyone see why this is? I will link my CSS below. I have been trying to figure out the problem for about thirty minutes but I haven't been able to find anything. If somebody could please show me what the problem is I would appreciate it a ton!
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
color: #333333;
}
add #import url(http://fonts.googleapis.com/css?family=Lato); to your css sheet.
then tell me how it works, I don't have Lato font in my Windows fonts on my laptop