I tried using overflow-x to make it horizontally scrollable. still extra divs are coming down. Is there any way to make it scrollable after using full screen width. please any help. Thank you.
.card{
display:block;
background-color:green;
border:2px solid black;
overflow-x:auto;
whitespace:nowrap;
}
.card-body{
display:block;
background-color:green;
}
<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-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
Replace your row class by d-flex and from medium screen it will scroll horizontal as you wish.
It is because row in bootstrap 4 include flex-wrap:wrap;.
DEMO
.card{
display:block;
background-color:green;
border:2px solid black;
overflow-x:auto;
whitespace:nowrap;
}
.card-body{
display:block;
background-color:green;
}
<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="d-flex">
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100 py-2">
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
Related
I have a 3 row layout and inside of it there are multiple column and row combinations.
I tried this solution, but I couldn't do it to my code. How can I get a Bootstrap column to span multiple rows?
I have problem with 2nd row, I want to align 3rd column.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="past-wrapper">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header text-center">Geçmiş</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 column-aligner">deneme</div>
<div class="col-3 column-aligner">deneme</div>
</div>
</div>
<div class="today-wrapper">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header text-center">Bugün</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 defect-wrapper justify-content-center">
<div class="row defect-wrapper-row">
<div class="col-6 defect-col">deneme</div>
<div class="col-6 defect-col">deneme</div>
</div>
</div>
<div class="col-3 column-aligner">deneme</div>
</div>
</div>
<div class="action-wrapper">
<div class="row align-items-center">
<div class="col-1 column-aligner action-notes">
<div class="column-header text-center">Aksiyonlar</div>
</div>
<div class="col-10 column-aligner action-notes">deneme</div>
</div>
</div>
Firstly, rows should always be children of containers. The two have offsetting margins that need to balance. Review the grid docs. I've used the container-fluid class so they're full width.
Then, your columns need to total 12 for a given row (or at least should have the same total for each row). If you can't make that work, consider using Bootstrap's flexbox layout instead of rows and columns.
Also, your nested columns should span the entire row if you want them to stack, meaning you need col-12 instead of col-6 for those.
The only thing remaining is to set heights on the columns, if you actually need them to stretch. That can be done in several ways.
I've added interior divs and some CSS here for demonstration purposes. You wouldn't need those unless you want to apply color as I have.
/* styles for demo only */
.row>div>div:not(.row) {
background: #ddd;
border: 1px dotted #aaa;
}
.today-wrapper>.row {
background: pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid past-wrapper">
<div class="row align-items-center">
<div class="col-2 column-aligner">
<div class="column-header text-center">Geçmiş</div>
</div>
<div class="col-4 column-aligner">
<div>deneme</div>
</div>
<div class="col-3 column-aligner">
<div>deneme</div>
</div>
<div class="col-3 column-aligner">
<div>deneme</div>
</div>
</div>
</div>
<div class="container-fluid today-wrapper">
<div class="row align-items-center">
<div class="col-2 column-aligner">
<div class="column-header text-center">
Bugün
</div>
</div>
<div class="col-4 column-aligner">
<div>deneme</div>
</div>
<div class="col-3 defect-wrapper justify-content-center">
<div class="row defect-wrapper-row">
<div class="col-12 defect-col">
<div>deneme</div>
</div>
<div class="col-12 defect-col">
<div>deneme</div>
</div>
</div>
</div>
<div class="col-3 column-aligner">
<div>deneme</div>
</div>
</div>
</div>
<div class="container-fluid action-wrapper">
<div class="row align-items-center">
<div class="col-2 column-aligner action-notes">
<div class="column-header text-center">
<div>Aksiyonlar</div>
</div>
</div>
<div class="col-10 column-aligner action-notes">
<div>deneme</div>
</div>
</div>
</div>
the sum of the columns must be 12, if it gives more or less, the layout will be harmed.
I made some adjustments to the columns.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="container-fluid text-center">
<div class="past-wrapper bg-danger">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header">Geçmiş</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 column-aligner">deneme</div>
<div class="col-4 column-aligner">deneme</div>
</div>
</div>
<div class="today-wrapper bg-warning">
<div class="row align-items-center">
<div class="col-1 column-aligner">
<div class="column-header">Bugün</div>
</div>
<div class="col-4 column-aligner">deneme</div>
<div class="col-3 column-aligner">
<div class="w-100 defect-col">deneme</div>
<div class="w-100 defect-col">deneme</div>
</div>
<div class="col-4 column-aligner">deneme</div>
</div>
</div>
<div class="action-wrapper bg-primary">
<div class="row align-items-center">
<div class="col-1 column-aligner action-notes">
<div class="column-header">Aksiyonlar</div>
</div>
<div class="col-11 column-aligner action-notes">deneme</div>
</div>
</div>
</div>
I am trying to stretched link for my nested div but it is including even parent. I need only listItem to be clickable but this makes entire card div clickable.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<div class="col-xl-12 col-md-12 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white text-center">Page Title</h3>
</div>
<div class="card-body">
<div class="listItem">
<img src="https://via.placeholder.com/100" class="rounded" alt="Title">
<p><span class="badge bg-secondary text-light" style="font-size: large;">Title</span></p>
<p><span class="badge bg-secondary ms-2">Views</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xl-12 col-md-8 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white">Category</h3>
</div>
<div class="card-body">
....
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Per the Bootstrap docs (and the fundamental rules of absolute positioning), stretched links apply to the nearest element with non-static positioning. You can put the position-relative class on the parent to make that so.
I've also replaced your inline font size styles with the lead class on the parent paragraph. Just don't use inline styles, especially when your style library provides typography classes for that.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-xs-8">
<div class="col-xl-12 col-md-12 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white text-center">Page Title</h3>
</div>
<div class="card-body">
<div class="listItem position-relative">
<img src="https://via.placeholder.com/100" class="rounded" alt="Title">
<p class="lead"><span class="badge bg-secondary text-light">Title</span></p>
<p><span class="badge bg-secondary ms-2">Views</span></p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xl-12 col-md-8 mb-3 mt-2">
<div class="card custom-bg-2 h-100">
<div class="card-header bg-secondary">
<h3 class="fw-bold text-white">Category</h3>
</div>
<div class="card-body">
....
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've got a questtion about the Bootstrap Card Deck.
I create a Card Deck with two cards in a row. On the first card I've got some text under the header and in the second card there is no text under the header. In this case the grey color does not fill the whole card as you can see in the example. How can I fix it, that the hole column is also grey?
Thanks for your help!
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<p class="font-weight-light text-muted mb-2">Some text</p>
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">50</p>
</div>
</div>
</div>
</a>
</div>
If you want to have the height be equals the container, you can use h-100 on the div row mx-0.
More information can be found here: https://getbootstrap.com/docs/4.0/utilities/sizing/
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<p class="font-weight-light text-muted mb-2">Some text</p>
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 mx-0">
<div class="col-md-8 grey lighten-4 rounded-left pt-2">
<h5 class="font-weight-bold">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2">No text</p> -->
</div>
<div class="col-md-4 text-center pt-3">
<p class="h2 font-weight-normal"></p>
</div>
</div>
</div>
</a>
</div>
Ideally you should not play around with left/right margins of row and col in bootstrap. You should use no-gutters class with row to have the effect you want. Additionally, you should add h-100 on the second row to take full height. Also a better way to center align your number is like I have done in the snippet by using justify-content-center d-flex align-items-center.
Also your code was missing a container element so that scrollbar was coming in your snippet. I have added that too.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.11.0/css/mdb.min.css">
<div class="container">
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 no-gutters">
<div class="col-md-8 grey lighten-4 rounded-left">
<h5 class="font-weight-bold p-2">Header</h5>
<p class="font-weight-light text-muted mb-2 px-2">Some text</p>
</div>
<div class="col-md-4 text-center justify-content-center d-flex align-items-center">
<p class="h2 font-weight-normal">60</p>
</div>
</div>
</div>
</a>
<a href="#" class="card hoverable">
<div class="card-body p-0">
<div class="row h-100 no-gutters">
<div class="col-md-8 grey lighten-4 rounded-left">
<h5 class="font-weight-bold p-2">Header</h5>
<!-- <p class="font-weight-light text-muted mb-2 px-2">No text</p> -->
</div>
<div class="col-md-4 text-center justify-content-center d-flex align-items-center">
<p class="h2 font-weight-normal">50</p>
</div>
</div>
</div>
</a>
</div>
</div>
Please check the code differences https://i.stack.imgur.com/0Q2IX.png
Using anchor tag as it will not consider a height and width so you have to set a class in card-body using this class="card-body p-0 grey lighten-4".
Remove the class "grey lighten-4" from class="col-md-8 rounded-left pt-2" & set to class="card-body p-0 grey lighten-4"
.grey {
background-color: #f5f5f5 !important;
}
/*OR*/
.grey.lighten-4 {
background-color: #f5f5f5 !important;
}
<div class="card-deck mb-5">
<a href="#" class="card hoverable">
<div class="card-body p-0 grey lighten-4">
<div class="row mx-0">
<div class="col-md-8 rounded-left pt-2">
...
</div>
<div class="col-md-4 text-center pt-3">
...
</div>
</div>
</div>
</a>
</div>
Column not splitting properly. I need the bottom picture to go under the same picture above.
Changed col and image size
<div class=" container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-4 p-0"><a href="ourstory.html"><img src="Mainimages/Ourhistory.jpg" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
<div class="w-100"></div>
<div class="col-8 p-0">
<img src="Mainimages/Promotions.jpg" style="width:100%" alt="Promotions">
</div>
</div>
</div>
In bootstrap col-6 is synonymous to 50% and col-12 is 100%
So technically to achieve your aim you do:
|--------------------div:col-12------------------------------|
|------div:col-6---------| |----------div:col-6-------------|
|---------------------------| |----------div:row--------------|
|---------img-------------| |-div:col-12-|-|-div:col-12-|
|---------------------------| |-----img----|-|----img--------|
Try the snippet below:
.s50{
height:50%;
}
.s50 img {
width:100%;
height:100%
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mx-auto mt-5 p-0">
<div class="row m-0 ">
<div class="col-6 p-0">
<a href="ourstory.html"><img src="https://pinimg.icu/wall/0x0/los-mejores-fondos-de-pantalla-para-hombres-tumblr-wallpaper-E7f21aa5c622192c35a8e92d039623fcc.jpg?t=5cf09dc88fee5" style="width:100%"
alt="Our History"></a>
</div>
<div class="col-6 p-0">
<div class="col-12 s50 p-0">
<img src="https://hackernoon.com/hn-images/1*lduEjOI-EQltoRbmKSICeA.jpeg" alt="Promotions">
</div>
<div class="col-12 s50 p-0">
<img src="https://d3n8a8pro7vhmx.cloudfront.net/3dna/pages/46410/meta_images/original/00-featured-bs4-bootstrap.jpg?1561992643" style="" alt="Promotions">
</div>
</div>
</div>
</div>
I'm not sure If you're looking for equal half's but you have to split the right hand side column into two rows again using divs to achieve this.
<div class="row">
<div class="col-md-6">
--First left image here--
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
-- second top right image here --
</div>
</div>
<div class="row">
<div class="col-md-12">
-- third bottom right image here --
</div>
</div>
</div>
</div>
We don't have your exact images sizes, but I've tried to put dummy images just show you example, If you want your page to display in the same alignment, you have to divide the div equally which sums up. You can set and divide the divs equally and make it responsive by inserting classes col-sm and col-md.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="feature-wrapper bg-primary pt-5 pb-5 mt-5 mt-lg-0">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<a href="ourstory.html"><img src="https://dummyimage.com/100X40/000/fff" style="width:100%"
alt="Our History"></a> </div>
<div class="col-sm-12 col-md-4 text-center text-md-left text-uppercase mb-3 mb-md-0">
<img src="https://dummyimage.com/100X50/000/fff" style="width:100%" alt="Promotions">
</div>
<div class="col-sm-12 col-md-4 text-center mb-3 mb-md-0">
<img src="https://dummyimage.com/200X60/000/fff" style="width:100%" alt="Promotions">
</div>
</div>
</div>
</div>
I have the following issue, if I minimize the browser width, the spans are out of the div:
How can I change the line automatically (without using br)? Like:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row">
<div class="bg-danger col-12 col-md-4 col-xl-3 p-5 mb-3">
<div class="row">
<div class="row">
<div class="col d-flex justify-content-start flex-column">
<span>pepasdasdsadaiadtoadsasdasssssssda23#gmail.com</span>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-start flex-column">
<span>pepasdasdsadaiadtoadsasdasssssssda23#gmail.com</span>
</div>
</div>
</div>
</div>
</div>
Use word-break: break-all CSS property.
.break-words {word-break: break-all}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row">
<div class="bg-danger col-12 col-md-4 col-xl-3 p-5 mb-3">
<div class="row">
<div class="row">
<div class="col d-flex justify-content-start flex-column break-words">
<span>pepasdasdsadaiadtoadsasdasssssssda23pepasdasdsadaiadtoadsasdasssssssda23#gmail.com</span>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-start flex-column">
<span>pepasdasdsadaiadtoadsasdasssssssda23#gmail.com</span>
</div>
</div>
</div>
</div>
</div>
Try using the CSS property on the span word-wrap: break-word;