I am trying to fix a code. I want a responsive image with Bootstrap, but it doesn't work. How can I solve the problem?
<header class="masthead text-center text-white d-flex">
<div class="container my-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
<!--immage responsive do not word on bootstrap -->
<img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">
</div>
<div class="col-lg-8 mx-auto">
<p class="text-faded mb-5"></p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
</div>
</div>
</div>
</header>
Ivan
Michal Graczyk is correct... img-responsive has been replaced by img-fluid in Bootstrap 4.
You can find more information about the changes from v.3 to v.4 at https://getbootstrap.com/docs/4.0/migration/
You can find more information specifically about images in v.4 at https://getbootstrap.com/docs/4.0/content/images/
I guess there is some problem with your bootstrap CDN when I tried executing your code with proper bootstrap CDN with some random height and width of the image. It was responsive.
This is with respect to bootstrap 3
<!DOCTYPE html>
<html>
<head>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header class="masthead text-center text-white d-flex">
<div class="container my-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
<!--immage responsive do not word on bootstrap -->
<img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">
</div>
<div class="col-lg-8 mx-auto">
<p class="text-faded mb-5"></p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
</div>
</div>
</div>
</header>
</body>
</html>
If you are using Bootstrap 4
Images in Bootstrap 4 are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
<img src="..." class="img-fluid" alt="Responsive image">
Since You're using Bootstrap 4 there is no img-responsive class. You should use img-fluid.
Related
I am currently new in bootstrap5 and i am having whitespace problems on my left side when its on full screen its all fine but when I am testing responsiveness the whitespace on the image never leaves.
I have tried the overflow and setting height and width but it still doesn't occupy it. help is highly appreciated as i am new with Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="supertest.css">
</head>
<body>
<div class="container-fluid g-0 m-0 p-0 ">
<div class="row g-0">
<div class="col-8 g-0 m-0 p-0">
<img src="backgroundleft.jpg" alt="leftbg" class="img-fluid h-100 w-100">
</div>
<div class="col-4 overflow-hidden d-flex flex-column">
<div class="text-center pt-5 mb-2">
<img src="PUPLogo.png" alt="" class="w-25">
</div>
<h1 class="text-center">Reg<span>iTech</span></h1>
<h2 class="px-5">Login</h2>
<form>
<div class="form-group px-5 mb-3">
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group px-5">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="d-flex justify-content-center mt-3">
<button type="submit" class="btn w-50 ">Submit</button>
</div>
</form>
<div class="mt-3 text-center">
don't have an account yet ?
</div>
<div class="row text-center mt-auto">
<div class="copyright">
Copyright#2022 | RegiTech | Developed DICT 3-1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
One solutions could be to remove the image as an elements and add it as a background image via CSS to style the container itself. Then, using some aspect ratio magic with object-fit: cover; You should be able to set a responsive background image which scales.
Example Here: https://jsfiddle.net/fatchild/r70gLwu3/53/
The idea is that you want the container to never show white space so you set the background image of that container to the image and make sure the image is 100 viewport width and height. This might cause the image to distort if it was forced to be the height and width of the container. To remedy this, the object-fit declaration will make sure the most appropriate part of the image is shown without distorting the aspect ratio or causing white space.
Remove the img element
Add new id to the container element id="bg-img"
Set some new declarations for that id attribute
#bg-img {
object-fit: cover;
background-image: url("http://uniacco.com/blog/wp-content/uploads/2019/12/shutterstock_1062917057.jpg");
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
Remember that local resources will not render on other peoples machines. So when posting an example make sure to link a random image from the internet, as you it will render on other people's local machines when they try to run your code.
Recently, I'm developing using bootstrap for a chatting system. But publishing a job is very difficult for me.
I want to develop the message template using bootstrap. I'm only using a bootstrap grid system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="lib/bootstrap.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="lib/bootstrap.min.js"></script>
<div class="container-fluid">
<div>NickName</div>
<div class="row flex-nowrap">
<div class="col-auto" style="background-color: beige;">
<div class="row flex-nowrap">
<div class="col-auto">
<div class="text-break">
FileName : sddfssfdsdfsfdsdfsfddssdffdssfdsdfsdfsfdsdffdsfsdfsdsfdssfdsdfadsasdadsadsadsdasadsadsdaadsasdasds
</div>
<div>
SIZE
</div>
</div>
<div class="col-auto align-self-center">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto align-self-center text-nowrap">
PM 7:32
</div>
</div>
</div>
</body>
</html>
I want to show all contents when class is set to flex-nowrap. But above code is not working well.
If I reduce browser size in the above code, then the image tag and PM7:32 are hidden.
I don't know what to do. I want to show the following picture always.
You need to play with class col and col-auto inside row structure and use text-break class for braking single line text without spaces.
I hope this below snippet will help you a lot.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div>NickName</div>
<div class="row">
<div class="col-12">
<div class="row flex-nowrap align-items-center">
<div class="col">
<div class="row flex-nowrap align-items-center rounded py-2" style="background-color: beige;">
<div class="col">
<div class="text-break">
<strong class="float-left mr-1">FileName:</strong> sddfssfdsdfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsddffdsfsdfdsdfdffdsfsdfdsdf-Last Text
</div>
<div>
<strong>Size:</strong> 100kb
</div>
</div>
<div class="col-auto">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto text-nowrap">
PM 7:32
</div>
</div>
</div>
</div>
</div>
"d-flex" is important. You can try:
<div class="d-flex flex-nowrap">
...
</div>
I would like to make an adaptive design for a small website with Bootstrap, but I'm a newbie and can't find any solution for my problem here. I want to be able to display the header for a wide set of different devices, it means for cell phones with small display too. So I have written something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0.5">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<header class="bg-light">
<div class="container">
<div class="row p-3 bg-success rounded">
<div class="col-md-2 col-sm-3 text-left">
<img src="images/home.png" class="img-fluid" alt="Home">
</div>
<div class="col-md-8 col-sm-6 text-center">
<h2>MainText</h2>
</div>
<div class="col-md-2 col-sm-3 text-right">
<img src="images/settings.png" class="img-fluid" alt="Settings">
</div>
</div>
</div>
</header>
</body>
</html>
It works with every web-browser pretty good, but it doesn't work properly for small resolutions.
This is the normal view of this page:
But after reaching some width (it should be 576px as I see), it breaks my layout into three lines for every div:
It doesn't depend on text or image size, there a lot of place there, so it should be a behavior of the Bootstrap.
How could I avoid it and do a really adaptive design? My page is very simple and it should be a solution to display it properly, I can't understand why Bootstrap doesn't allow it.
Add col for smaller screens. You can remove col-sm and leave only col-
This happen to your code because you didnt set anything for smaller screen than sm and bootstrap by default set any column to col-12. So your three rows on small screens had col-12 inside them. The title went to center cause of text-center class and last image went left cause of text-right.
<header class="bg-light">
<div class="container">
<div class="row p-3 bg-success rounded">
<div class="col-md-2 col-sm-3 col-3 text-left">
<img src="images/home.png" class="img-fluid" alt="Home">
</div>
<div class="col-md-8 col-sm-6 col-6 text-center">
<h2>MainText</h2>
</div>
<div class="col-md-2 col-sm-3 col-3 text-right">
<img src="images/settings.png" class="img-fluid" alt="Settings">
</div>
</div>
</div>
</header>
Live example
If you want different approach on small screens change the col-* classes.
col-xs-* have been dropped in Bootstrap 4 in favor of col-*.
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 am trying to create a simple grid using cards. I am using ng-repeat to create cards. The problem is there is no spacing between each card as shown
I am using the below code
<!DOCTYPE html>
<html lang="en" ng-app="movieflix">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="catalogcontroller">
<div class="row" >
<div dir-paginate="user in users|itemsPerPage:16">
<div class="col-xs-6 col-sm-3 col-md-3">
<div class="card card-block ">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="http://ia.media-imdb.com/images/M/MV5BMTU4MDU3NDQ5Ml5BMl5BanBnXkFtZTgwOTU5MDUxNTE#._V1_SX300.jpg", class="img-fluid" alt="">
<a>
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-block">
<!--Social shares button-->
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="d-flex flex-row-reverse">
<h5 class="waves-effect waves-light p-2">Read more <i class="fa fa-chevron-right"></i>
</h5>
</a>
</div>
<!--/.Card content-->
</div>
</div>
</div>
</div>
<dir-pagination-controls
max-size="5"
direction-links="false"
boundary-links="false" >
</dir-pagination-controls>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="js/dirPagination.js"></script>
<script src="js/movieflix.module.js"></script>
<script src="js/catalog.controller.js"></script>
</body>
</html>
Can someone tell me what is wrong with my code.
Really appreciate any suggestions.
Thanks in advance
The card class works perfectly well. Your images are too wide. Change your image class from img-fluid to img-responsive and it should work.
At least it does on this fiddle.
Add space between the cards:
.card {
margin-right: 10px;
}
.card:last-of-type {
margin-right: 0;
}