I am using bootstrap to create a html page where I am showing a list of images. But some images are showing bigger and the last image sometimes get out of my main container div. Also, if i reduce the browser size then some items overlap at some point. How do I solve it?
My css:
* { arial, sans-serif !important; }
body{ padding-top: 50px; }
img.img-thumb{
height: 180px;
width: auto; }
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Test Web</title>
</head>
<body>
<div class="container-fluid">
<!-- ------------------ Main ----------------------- -->
<div class="col-md-2">Left sideBar</div>
<div class="col-md-8">
<h2 class="text-center">Mens shoes</h2>
<hr>
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-3">
<h4>shoe-1</h4>
<img src="https://cdn.sweatband.com/asics_gel-pulse_11_mens_running_shoes_asics_gel-pulse_11_mens_running_shoes12.jpg"
alt="shoe-1" class="img-thumb" />
<p class="list-price text-danger">List Price: £50 </p>
<button type="button" class="btn btn-sm btn-success" onclick="">Details</button>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 ">
<h4>shoe-1</h4>
<img src="https://images.sportsdirect.com/images/products/21113502_l.jpg" alt="shoe-1"
class="img-thumb" />
<p class="list-price text-danger">List Price: £50 </p>
<button type="button" class="btn btn-sm btn-success" onclick="">Details</button>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<h4>shoe-1</h4>
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/merrell-nova-mens-0506-1563371874.jpg"
alt="shoe-1" class="img-thumb" />
<p class="list-price text-danger">List Price: £50 </p>
<button type="button" class="btn btn-sm btn-success" onclick="">Details</button>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<h4>shoe-1</h4>
<img src="https://absolute-snow.cdn.rlab.net/Larger/6e291399-33da-47c3-97df-3e5712d6c932cloudventure-mens-trail-running-shoes-flare-dawn-p9007-8363_.jpg"
alt="shoe-1" class="img-thumb" />
<p class="list-price text-danger">List Price: £50 </p>
<button type="button" class="btn btn-sm btn-success" onclick="">Details</button>
</div>
</div>
</div>
<div class="col-md-2">Right sideBar</div>
<!-- ----------------------- footer ------------------------- -->
</div>
<br><br>
<hr>
<div class="col-md-12 text-center">
© Copyright 2013-2015
</div>
</body>
</html>
here is the link: https://jsfiddle.net/rashed007/xeukaqr4/1/
One solution I found is that instead of defining image width I can say max-width: 100%;
So, if I use the below code then images loose their ratio :
img.img-thumb{
height: 180px;
width: auto;
max-width:100%;
max-height:100%;
}
and if I use the below then the images get into different sizes:
img.img-thumb{
max-width:100%;
max-height:100%;
}
How to properly do it?
Since you're using BS3 give the images the class img-responsive and remove the max-* attributes you added. That's a built-in BS3 class that sets the max-width to 100% and the height will adjust automatically based on the intrinsic aspect ratio of your image.
Related
I'm trying to align buttons at the bottom left of a banner. I tried with a sample code but it gets misaligned every time the resolution changes.
Tried html code here,
<div class="row">
<div class="col-sm-12 header" style="background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg); background-repeat: no-repeat; background-size: 100% 100%;">
<div class="row">
<div class="col-sm-9"></div>
<div class="col-sm-3" style="margin-top: 12%">
<div class="row " style="margin-top: 46%; margin-left: 254px !important;">
<button class="btn btn-primary">Button1</button>
</div>
<div class="row " style="margin-top: -7%; margin-left: 367px !important;">
<button class="btn btn-success">Button2</button>
</div>
</div>
</div>
</div>
Fiddle
.header {
background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 10rem;
object-fit: scale-down;
}
.btn {
margin-top: 8.5rem;
margin-left: 0.5rem;
}
<div class="row">
<div class="col-sm-12 header">
<div class="column">
<button
class="btn btn-primary">
Button1
</button>
<button class="btn btn-success">
Button2
</button>
</div>
</div>
</div>
For your background scaling, having a look at this link: https://www.w3schools.com/css/css3_object-fit.asp
Or you could try using flex for the layout: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here is a way to place the buttons as desired in the bottom left corner of the banner based on the existing code:
<html>
<head>
<title>Bootstrap 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/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div
class="col-sm-12 header"
style="
background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
"
>
<div class="row">
<div class="" style="margin-top: 12%"></div>
<div class="" style="display: flex; align-items: flex-end">
<div>
<button class="btn btn-primary">Button1</button>
</div>
<div>
<button class="btn btn-success">Button2</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
To position the buttons bottom right, you need to add justify-content: flex-end; to the wrapping div
So I am creating a form where we have an upload button in a card. The result was that the <label> and the image aligned properly but the <button> element was not shown below the label. I have even tried to use bootstrap classes such as ml-5 and such but still it doesn't work. I want the button to be placed below the label but the problem is: it comes on the same line as shown in the image:
I want it to look something like this:
Is there any way we can align the button below the label. It should look like the image above.
The code:
.img-wrapper {
display: block;
width: 6.4rem;
line-height: 15px;
margin-left: 6rem;
float: right;
}
.img-wrapper img {
display: inline;
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card bg-light mb-3">
<div class="card-body">
<label for="profile">Upload a Profile image:</label>
<button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>
<input type="file" name="profile" id="profile" hidden=""/>
<div class="img-wrapper">
<img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Bootstrap.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
You can use this code:
.img-wrapper {
display: block;
width: 6.4rem;
line-height: 15px;
margin-left: 6rem;
float: right;
}
.img-wrapper img {
display: inline;
border-radius: 50%;
}
.card-body{
display: flex;
justify-content: space-between;
}
.card-content{
display: flex;
flex-direction: column;
align-items: flex-start;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="card bg-light mb-3">
<div class="card-body">
<div class="card-content">
<label for="profile">Upload a Profile image:</label>
<button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>
</div>
<input type="file" name="profile" id="profile" hidden=""/>
<div class="img-wrapper">
<img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Bootstrap.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Wrap these elements in a div:
<div style="display: inline-block">
<label for="profile">Upload a Profile image:</label>
<button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>
</div>
and add display: inline-block to your button.
.d-inline {
display: inline-block;
}
You can change the button class to d-block from d-inline and put <div class="img-wrapper"> before it.
<label for="profile">Upload a Profile image:</label>
<div class="img-wrapper">
<img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>
</div>
<button type="button" class="btn btn-primary d-block" id="upload">Upload</button>
<input type="file" name="profile" id="profile" hidden=""/>
as you are using bootstrap, so it will be very easy for you to do this.
let me show you how it ll work:
<div class="row">
<div class="col-8 col-md-8 col-sm-8 col-lg-8"> // here you can specify cols on your own
<div class="row">
//your label and ll go here
</div>
<div class="row">
//button ll go here
//it ll create a new line but within this parent div
</div>
</div>
<div class="col-4 col-md-4 col-sm-4 col-lg-4">
// your image code ll go here
</div>
</div>
it ll give you button at bottom of the label and also image ll be placed as before with using standard bootstrap 4 classes only...
Thank you!
Happy coding!!
I have a problem with button text. I have customized the width and height of a button and when I resize, its text remains no more in center on some screen sizes in a debugging mode.
Html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ICT</title>
<base href="/">
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div #fade class="img-wrapper">
<img [src]="imgPath" class="img-fluid">
<div class="img-overlay">
<button routerLink="/test"
class="btn btn-success fill-container text-center testButton">
TEST
</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.img-wrapper {
position: relative;
}
.img-overlay {
position: absolute;
bottom: 31%;
left: 13.5%;
width: 34%;
height: 4%;
}
.testButton {
font-size: 3vw;
line-height: 20px;
}
.fill-container {
width: 100%;
height: 100%;
}
Update
Here is the image where I want html button to replace the button on image
Please have a look I have added the image on which I want to place an html button with same width and height so that it hides the image button.
Here's the code (using your HTML as a basis) for a large button that remains centered on all devices/screens. Click the "run code snippet" button below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div #fade class="img-wrapper">
<img [src]="imgPath" class="img-fluid">
<div class="img-overlay text-center">
<button routerLink="/test"
class="btn btn-lg btn-success fill-container text-center testButton" style="width: 34%;">
TEST
</button>
</div>
</div>
</div>
</div>
</div>
This should do the trick : Adding class text-center to parent div of the button tag.
<div class="row">
<div class="col-sm-12">
<div class="text-center">
<button routerLink="/test" class="btn btn-success">TEST</button>
</div>
</div>
</div>
Also make sure to include Bootdtrap V4 in head tag.
<head>
<meta charset="utf-8">
<title>ICT</title>
<base href="/">
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
Have a look at the this link as well, adding bootstrap to your page: click me
To center the text on button: Use
class="text-center"
You need to Apply "align-center" class on .img-overlay {} not on Button then it will work
I am using BootStrap grid to design my html pages. Everything is working fine except for small screens. In small screens the views are overlapping like below
I am using the below code
div class="container" >
<div class="row">
<div class=" col-xs-6 col-sm-offset-1
col-sm-4 col-md-offset-2 col-md-3">
<div id="poster">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg">
</div>
</div>
<div class="col-sm-offset-1 col-sm-4 col-xs-6 col-md-2" >
<div id="ratingdiv">
<label>Your Rating</label>
<div id="rateYo"></div>
<div class="editbtn">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button>
</div>
<div class="deletebtn">
<button>Delete</button>
</div>
</div>
</div>
</div>
</div>
I gave "col-xs-6" but still its not working.
Could some one tell me what I am doing wrong.
Really appreciate any ideas or suggestions.
Thanks in advance
You missed some closing tags. Here you go. Let me know if this is what you've expected.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-6 col-lg-4">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2">
<div id="ratingdiv">
<div class="row">
<label>Your Rating</label>
<div id="rateYo"></div>
</div>
<div class="row">
<button type="button" class="btn btn-info btn-md">Edit</button>
<button type="button" class="btn btn-danger btn-md">Delete</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you don't have provide any css , that's why i got two opinions. first one i think you images overlapping the col-xs-6 and the solution is below . may be this will fix your issue
#poster {
width:100%;
float:left;
}
#poster img {
width:100%;
}
otherwise i think you have set position:absolute to #ratingdiv , if you set postion to #ratingdiv just change position:relative to the media queries
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;
}