i am using bootstrap card to create a basic image and text underneath.Decided to use card class since its a pretty good structure and didn't want to use too much css to make div list horizontally. what i want is like an image gallery with horizontal scroll like this
the problem is that card behavior is to get smaller as i add more cards . what is the issue here? , maybe i shouldn't use card-group?. maybe have to scrap bootstrap and write my own?
.card-group {
overflow-x: scroll;
white-space: nowrap;
max-width: 30rem;
padding: 1rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="./index.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<div class="container mt-4">
<div class="horzontal-scrollgallery">
<div class="card-group">
<div class="card pr-3">
<img class="card-img-top" src="./images/chicago.jpg" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Doe</h4>
</div>
</div>
<div class="card pr-3">
<img class="card-img-top" src="./images/chicago.jpg" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Doe</h4>
</div>
</div>
<div class="card pr-3">
<img class="card-img-top" src="./images/chicago.jpg" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Doe</h4>
</div>
</div>
<div class="card pr-3">
<img class="card-img-top" src="./images/chicago.jpg" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Doe</h4>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
The reason why your cards are getting smaller is because .card-group is displayed as flex and its card items' flex-grow is set to 1, which means they will take up equal widths:
To get what you want, you can define a custom class along with its default .card-group (so that you don't override the default card-group styles), set its overflow style as well as its children <card>'s flex-basis so that they have a default width. You will need to set card-group's wrapping style to no-wrap as well as the default is set up wrap.
CSS
#media (min-width: 576px) {
.card-group.card-group-scroll {
overflow-x: auto;
flex-wrap: nowrap;
}
.card-group.card-group-scroll > .card {
flex-basis: 35%;
}
}
Result
fiddle: http://jsfiddle.net/b2jw13go/1/
Related
Can you help me do a css for this sample?
I want to display the card in 1 column when it's view on tablet devices,
and 2 column if it's view on desktop.
Sample
Thanks!
You should use Bootstrap's grid system here. I have attached a sample code with just two divs. This is for your better understanding. Before you proceed to cards, first play around with the grid system and make yourself wise in it. This is as simple as it looks. A bootstrap row is divided by equal 12 columns. They can be represented using- lg- large device, md- medium device, sm- small device and xs- extra small device.
col-lg-6 col-md-12 -This implies that, the DOM elements should take 6 columns of a row when it is in Desktop view and 12 columns when it is in Tablet view.
Make sure you learn how media queries work, then proceed with bootstrap's grid system. Hope it helps!.. Happy coding.!!
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
#div1{
background: #0ef;
}
#div2{
background: #fe0;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="row">
<div class="col-lg-6 col-md-12" id="div1">div 1</div>
<div class="col-lg-6 col-md-12" id="div2">div 2</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Grid system - bootstrap 4
https://getbootstrap.com/docs/4.3/layout/grid/
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="media border border-secoundery m-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSeLpmTC32CdJU5T9AuHFGCtPwbt_MCnhc4b7RPsm1uSK-0SslS" class="mr-3" style="max-width:100px" alt="...">
<div class="media-body">
<h5 class="mt-2">test title 1</h5>
content test
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
It would be pretty simple using css grid.
Let’s say you have 4 divs. Put those in a container. Set that container to:
container {
display: grid;
grid-template-columns: auto auto;
}
This sets 2 automatically scaled columns normally.
and then set a media query for your selected width of a tablet
#media (max-width: 500px) {
container {
grid-template-columns: auto;
}
}
This means up to 500px, there will only be one column. No one else used css grid so I thought it would be cool to show.
I might have mixed up columns and rows cause I’m dumb but yea that’s it. I suggest you learn about media queries, and css grid/flexgrid/bootstrap
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>
Website structure currently looks like this:
index.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<!-- Own styles -->
<link rel="stylesheet" href="css/styles.css">
<title>My website</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-4 sidebar d-flex flex-column align-items-center justify-content-center text-center fixed-top">
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
<p class="text-muted mt-5 mb-0">123 456 789</p>
<p class="text-muted">test#test.com</p>
<p class="mt-5 text-white">
Language 1
|
Language 2
</p>
<p class="social">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-twitter"></i></i>
</p>
<p class="text-muted">© Someone | 2015 - 2019</p>
</div>
<div class="col-12 col-md-8 offset-md-4 d-flex flex-column mt-5 content">
<p>Content</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
styles.css:
#media (max-width: 767.98px) {
.sidebar {
height: auto !important;
padding-top: 10px;
padding-bottom: 10px;
position: static;
}
}
.sidebar {
background-color: #9DB9E8;
height: 100vh;
}
On devices with class md and less I want to split sidebar on the left into two parts. First part should be on the top of the page only with following lines of code:
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
Second part should be at the bottom of the page (under div with class content) and contain all the remaining lines of code from sidebar. Both parts should have same styles as sidebar.
How do I achieve this in Bootstrap 4?
To do this, you should split them into two divs.
<div id="section1">
(what ever you want in 1st section.)
</div>
<div id="section2">
(whatever you want in 2nd section.)
</div>
So I want to vertical and horizontal align the slogan to the jumbotron, the top logo is in it correct place and the small isotype should go all the way on the base of the jumbotron.
any help is greatly appreciated.
#hero {
height: 50vh;
background-image: url("/img/background.png");
background-size: cover;
background-repeat: no-repeat;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<link rel="stylesheet" href="/css/custom.css">
<title>Document</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid" id="hero">
<div class="container">
<div class="row">
<div class="col-12 text-left align-top h-25">
<img src="/img/toplogo.png" alt="">
</div>
<div class="col-12 text-center align-middle h-auto">
<img src="img/slogan.png" alt="">
</div>
<div class="col-12 text-right align-bottom test">
<img src="/img/logowhite.png" alt="">
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
</body>
</html>
If I'm correct, you asking for align the slogan vertically to the center and align the isotype to the bottom as you showed in above image. You can add below inline style parts to the slogan and small isotype.
To align slogan to mid:
<img src="img/slogan.png" alt="" style="top:--height from the top-- ;">
or
<img src="img/slogan.png" alt="" style="display: flex; flex-direction: column; justify-content: center;">
To set small isotype into bottom:
<img src="/img/logowhite.png" alt="" style="top:--height from the top-- ;">
or
<img src="img/logowhite.png" alt="" style="display: flex; flex-direction: column; justify-content: center;">
I think, this will works on you.
As user #ZimSystem said it was just a matter of adding h-100 to the row and container
Thanks for your help.
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;
}