Is that possible to have a carousel in mobile and a grid with cols in desktop?
I have a grid layout like this :
<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">
</head>
<div class="row">
<div class="col-12 col-sm-6 col-md-4">
<img src="image.png" alt="" class="img-fluid">
<div class="row align-items-center text-start">
<div class="col-8 ps-2">
<h1>My title</h1>
</div>
<div class="col-4 text-center">
<span>Go more</span
</div>
</div>
<img src="image.png" alt="" class="img-fluid">
<div class="row align-items-center text-start">
<div class="col-8 ps-2">
<h1>My title</h1>
</div>
<div class="col-4 text-center">
<span>Go more</span
</div>
</div>
<img src="image.png" alt="" class="img-fluid">
<div class="row align-items-center text-start">
<div class="col-8 ps-2">
<h1>My title</h1>
</div>
<div class="col-4 text-center">
<span>Go more</span
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<img src="image.png" alt="" class="img-fluid">
<div class="row align-items-center text-start">
<div class="col-8 ps-2">
<h1>My title</h1>
</div>
<div class="col-4 text-center">
<span>Go more</span
</div>
</div>
<img src="image.png" alt="" class="img-fluid">
<div class="row align-items-center text-start">
<div class="col-8 ps-2">
<h1>My title</h1>
</div>
<div class="col-4 text-center">
<span>Go more</span
</div>
</div>
<img src="image.png" alt="" class="img-fluid">
<div class="row align-items-center text-start">
<div class="col-8 ps-2">
<h1>My title</h1>
</div>
<div class="col-4 text-center">
<span>Go more</span
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4">
<img src="image.png" alt="" class="img-fluid">
<div class="row align-items-center text-start">
<div class="col-8 ps-2">
<h1>My title</h1>
</div>
<div class="col-4 text-center">
<span>Go more</span
</div>
</div>
<img src="image.png" alt="" class="img-fluid">
<div class="row align-items-center text-start">
<div class="col-8 ps-2">
<h1>My title</h1>
</div>
<div class="col-4 text-center">
<span>Go more</span
</div>
</div>
<img src="image.png" alt="" class="img-fluid">
<div class="row align-items-center text-start">
<div class="col-8 ps-2">
<h1>My title</h1>
</div>
<div class="col-4 text-center">
<span>Go more</span
</div>
</div>
</div>
</div>
So I have three columns with images and small text and I would like to have a carousel when I am on a small screen. I try to find a solution on the internet but the only solution I found was to speak about the owl carousel but I want to use the bootstrap carousel with only one image by one image.
What is the best to do that?
Related
I'm trying to stack these picture vertically on a small screen. So one
column instead of two
I'm trying to stack these picture vertically on a small screen. So one
column instead of two:
Here is my code:
<div class="container">
<div class="row g-0">
<div class="col-6 col-ms-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skylit.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skit4.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="w-100"></div>
<div class="col-6 xl-col">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skit6.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/skylit2.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col-12">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/lvr.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
<div class="col-6 sm-col">
<div class="hovereffect">
<img
class="img-responsive img-fluid"
src="project-images/gym.jpg"
alt=""
/>
<div class="overlay">
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>
Here is what I tried so far:
/* Please improve your content by showing what you tried so far */
e. G. Added "some" to "thing", Edited column count, I'm not that into HTML but you get what you could write here
If using bootstrap the classes should be col-sm-12, I see you are using sm-col-12 and col-ms-12. That should make the element take all space in grid.
https://getbootstrap.com/docs/4.0/layout/grid/
Start from smallest class too: class="col-12 col-sm-12 col-md-6"
I am trying to fit in the admin page this dashboard component. The content does not align correctly with the container (from the sidebar to the other end horizontally and from the navbar to the footer vertically). The issue I'm having is that I cannot fit it just right. The admin panel is made out of 3 components: admin page/sidebar/dashboard component.
The Dashboard content and how it aligns so far:
How can I align it correctly using Bootstrap 5?
Admin Page:
<template>
<div>
<sidebar></sidebar>
<div class="container">
<div class="row gutters-sm">
<div class="vh-100 d-flex justify-content-center align-items-center">
<div class="card">
<div class="card-body tab-content">
<div class="tab-pane active">
<keep-alive>
<component :is="retrieveComponentMethod"></component>
</keep-alive>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
Dashboard Component:
<template>
<div class="row mb-3">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's sales amount</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$ {{ todaysell }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
<span>Since last month</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-primary"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Earnings (Annual) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's income</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$ {{ income }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 12%</span>
<span>Since last years</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-shopping-cart fa-2x text-success"></i>
</div>
</div>
</div>
</div>
</div>
<!-- New User Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's due</div>
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">$ {{ due }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 20.4%</span>
<span>Since last month</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-users fa-2x text-info"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Pending Requests Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's Expenses</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$ {{ expense }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> 1.10%</span>
<span>Since yesterday</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-comments fa-2x text-warning"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 mb-4">
<!-- Simple Tables -->
<div class="card">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Out of Stock Product</h6>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
...
</tr>
</thead>
<tbody>
<tr>
...
</tr>
</tbody>
</table>
</div>
<div class="card-footer"></div>
</div>
</div>
</div>
</template>
I am new to Bootstrap. I am trying to add images as cards. But I face some issues as the cards are stacking up one after the other without spaces. Below is the code with Bootstrap4.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
<a href="#" class="">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 card ">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
</div>
With the above code in screen cards are stacked one after other without space.
I tried with mr-1 but the 4th card is wrapping it into another row.
How can I add spaces between cards with evenly spaced above and below?
This is because you are using .col-* and .card on the same element. Try to be in the habit of putting your content elements inside your layout grid elements.
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#" class="">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#" class="">
Beautiful
<img class="img-fluid " src="https://upload.wikimedia.org/wikipedia/en/2/25/Bazzi_-_Beautiful.jpeg" alt="" srcset="">
</a>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="card m-1">
<a href="#">
Beautiful
<img class="img-fluid" src="https://upload.wikimedia.org/wikipedia/en/e/e4/Beautiful_Bazzi_Camila_Cabello_Single.png" alt="" srcset="">
</a>
</div>
</div>
</div>
</div>
I solved this problem using Bootstrap 4 Emdeds Utilities
https://getbootstrap.com/docs/4.3/utilities/embed
In this case you just need to add you image to a div.embbed-responsive like this:
<div class="card"><div class="embed-responsive embed-responsive-16by9"> <img alt="Card image cap" class="card-img-top embed-responsive-item" src="img/butterPecan.jpg" /></div><div class="card-block"><h4 class="card-title">Butter Pecan</h4><p class="card-text">Roasted pecans, butter and vanilla come together to make this wonderful ice cream</p></div></div>
or .card-img-top {width: 100%;}
I have a container with a row and inside that six portfolios items.
This code when used on a small screen I get the following result:
1st line : 2 images
2nd line : 1 image on the right side
3rd line : 2 images
4th line : 1 image on the left side
Anyone got a clue? Seems like a bug to me.
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img2.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img3.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img4.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb">
<img src="images/portfolio-img1.png" alt="image" class="img-responsive">
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
</div>
</div>
This is due to the different height of each post image, to avoid this use same size images or set the height of your <div class="col-md-4 col-sm-6 col-xs-12">...</div> similar to each other.
You can use the background-image property instead of just using <img> on the <div>.
Solution:
.portfolio-thumb {
width: 300px;
height: 200px;
background-size: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="portfolio-thumb" style="background-image: url('http://placehold.it/300x200');"></div>
<div class="portfolio-overlay">
<h2>Project One</h2>
<a href="#">
<i class="fa fa-search"></i>
</a>
</div>
</div>
</div>
</div>
Hope this helps!
New to bootstrap - have problem with carousel image going over text in nested columns below it. Structure is as follows - not sure why its overlapping nested columns
Would be very grateful for any advice / help
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-3">
<h1 id="logo">test</h1>
</div>
<div class="col-lg-8 col-md-8 col-sm-9 col-xs-9 brownbg">
<div class="row">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand"></span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">menu1</li>
<li>Menu2</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/photos/1.jpg" width="771" height="292">
</div>
<div class="item">
<img class="second-slide" src="images/photos/2.jpg" alt="Homeopathy 2">
</div>
</div>
</div><!-- /.carousel -->
</div>
<h2 id="logo2">text</h2>
<div id="menu-line"><!-- -->
<div class="clearfix"></div>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-3">
</div>
<div class="col-lg-5 col-md-5 col-sm-9-offset-0 col-xs-9 brownbg" id="C1">
text here
<img src="images/img1.png" width="163" height="55" alt=" " style="margin: 20px 0 0 0;" />
</div>
<div class="hidden-lg hidden-md col-sm-3 col-xs-3"></div>
<div class="col-lg-3 col-md-3 col-sm-9 col-xs-9 brownbg" id="C2">
<div style="border-bottom: 2px dashed #000;margin-top:30px;padding:20px 10px;">
<p class="cyan large">Text</p>
<p>text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-3 col-xs-3">
</div>
<div class="col-lg-5 col-md-5 col-sm-9-offset-0 col-xs-9 footerbg" id="C3">
text
</div>
</div>
<div class="hidden-lg hidden-md col-sm-3 col-xs-3"></div>
</div>
</div>
</div>