Does Bootstrap support displaying grid columns or rows in Carousel instead of carousel-item -s? The idea is to have a complex grid column structures that interchange with each other just like carousel-items. For example if we have the following grid:
<div class="container">
<div class="row" id="row1">
<div class="col col-6-sm">
<!-- further hierarchy -->
</div>
<div class="col col-6-sm">
<!-- further hierarchy -->
</div>
</div>
<div class="row" id="row2">
<div class="col col-6-sm">
<!-- further hierarchy -->
</div>
<div class="col col-6-sm">
<!-- further hierarchy -->
</div>
</div>
<div class="row" id="row3">
<div class="col col-6-sm">
<!-- further hierarchy -->
</div>
<div class="col col-6-sm">
<!-- further hierarchy -->
</div>
</div>
</div>
I would like to be able to represent row1, row2 and row3 divs as carousel-items.
Or perhaps if carousel-item supports having nested grid elements within its container I can simply wrap the grid hierarchy within the carousel-item ?
The Bootstrap 4 carousel still needs the carousel-item class to work, but it can be tweaked to work along with the grid columns. Just contain the row>col in each carousel-item...
https://www.codeply.com/go/ojz5BDpOej
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item py-5 active">
<div class="row">
<div class="col-sm-6">slide 1</div>
<div class="col-sm-6">slide 2</div>
</div>
</div>
<div class="carousel-item py-5">
<div class="row">
<div class="col-sm-6">slide 3</div>
<div class="col-sm-6">slide 4</div>
</div>
</div>
<div class="carousel-item py-5">
<div class="row">
<div class="col-sm-6">slide 5</div>
<div class="col-sm-6">slide 6</div>
</div>
</div>
<div class="carousel-item py-5">
<div class="row">
<div class="col-sm-6">slide 7</div>
<div class="col-sm-6">slide 8</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Related
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'm using Bootstrap 4 carousel and trying to make it full width. And at first glance, it looks like full width, but then when you take a look at it at larger screens, the rest of the sliders after the first one show up as well. Just try zooming out the window.
How can I fix this?
Here's my code:
.first-slide {
background: url("https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg");
}
.carousel-item {
height: 800px;
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid p-0">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goes here</p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="carousel-item first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goes here</p>
</div>
<div class="col-md-5"></div>
</div>
</div>
<div class="carousel-item first-slide">
<div class="row">
<div class="col-md-6 offset-md-1">
<h1>Title</h1>
<p>Text goeshere</p>
</div>
<div class="col-md-5"></div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
</div>
Have you considered checking the markup on Bootstrap's website?
.carousel-item img {
max-height: 100vh;
object-fit: cover;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Title</h5>
<p>Text goes here</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Title</h5>
<p>Text goes here</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://image.ibb.co/kvhXGH/jetty_1373173_1920.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Title</h5>
<p>Text goes here</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
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>
I have a layout problem, summarized in the images.
Practically, I have two rows containing span4 divs. The problem is that one div of the first row is too high and it dictates the height of the row. In the second row, I have a small div, which would be great if it could fill the empty space of the row above. Is there a css3 trick to do that?
Please, take a look at the images. I've added a jsfiddle here:
http://jsfiddle.net/XmZwh/3/
<body>
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span4">
<div class="sub1"> <span class="icon-play"></span>item 1
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
</div>
<div class="span4">
<div class="sub1"> <span class="icon-play"></span>items
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
</div>
<div class="span4">
<div class="sub1"> <span class="icon-play"></span>item
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="sub1"> <span class="icon-play"></span>item
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span11 offset1">
<div class="sub2"> <a href="">item
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The html comes out of a dynamic construction of a menu, based on items stored in a CMS, so I don't have so much control over that.
the only way to do this is by having a containing div that contains a and d,
Here is a jsfiddle link: http://jsfiddle.net/jQYtd/
<div class"cont">
<div class="cont2">
<div id="a">A</div>
<div id="d">D</div>
</div>
<div id="b">B</div>
<div id="c">C</div>
and the css
.cont {
overflow:auto;
border:1px solid #ccc;
}
.cont2, #a, #b, #c {
float:left;
background-color:grey;
width:30px;
}
#a, #b, #c{
background-color:green;
height:30px;
}
#c {
background-color:red;
height:60px;
}
if you have no control over the HTML you can use jquery to add cont2 div
to do that via jquery you would do something like this
$( "#a, #d" ).wrapAll( "<div class='cont2'></div>" );
I am new to using Twitter Bootstrap and I can't wrap my head around their idea of grid organization. Basically I want to arrange this page with the right set of information colspaning the left. I tried nesting the information with rows, and just kept nesting until I got lost. In the example with JSfiddle below, the table looks fine when the window is wide enough but when you shorten the width of the window the pieces stack out of order. Right 1-6 should stack together (if they must stack at all). Thanks in advance.
http://jsfiddle.net/wBg8Y/
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default col-lg-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src='../../../images/mpIcon.PNG' class='sm-icon' />
<!--<span class="glyphicon glyphicon-search"></span>-->
Menubar
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div><!--<span class="glyphicon glyphicon-star"></span>-->
</form>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<!--<div class="jumbotron col-md-10 col-md-offset-1">-->
<div class="jumbotron col-md-12">
<div class="row">
<div class="col-md-6">
left top
</div>
<div class="col-md-3">right 1</div>
<div class="col-md-3">right 2</div>
<div class="col-md-6">
<div class="col-md-12">Markets</div>
<div class="col-md-4">markets left 1</div>
<div class="col-md-4">markets left 2</div>
<div class="col-md-4">markets left 3</div>
<div class="col-md-4">markets left 4</div>
<div class="col-md-4">markets left 5</div>
<div class="col-md-4">markets left 6</div>
</div>
<div class="col-md-3">right 3</div>
<div class="col-md-3">right 4</div>
<div class="col-md-3">right 5</div>
<div class="col-md-3">right 6</div>
</div> <!-- /row -->
</div> <!-- /jumbotron -->
<div class="col-md-6">Copyright 2013 Deloitte Development LLC</div>
<div class="col-md-6 text-right">
<a href='#'>About</a> |
<a href='#'>Contact</a> |
<a href='#'>FAQ</a> |
<a href='#'>Help</a> |
<a href='#'>Support</a>
</div>
</div> <!-- /container -->
Actually, I was over thinking it. Solved. Wrapping the left section in helped segregate it from the right.
change to:
<!-- Static navbar -->
<div class="navbar navbar-default col-lg-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src='../../../images/mpIcon.PNG' class='sm-icon' />
<!--<span class="glyphicon glyphicon-search"></span>-->
Menubar
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div><!--<span class="glyphicon glyphicon-star"></span>-->
</form>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<!--<div class="jumbotron col-md-10 col-md-offset-1">-->
<div class="jumbotron col-md-12">
<div class="row">
<div class="col-md-6">
left top
</div>
<div class="col-md-3">right 1</div>
<div class="col-md-3">right 2</div>
<div class="col-md-6">
<div class="col-md-12">Markets</div>
<div class="col-md-4">markets left 1</div>
<div class="col-md-4">markets left 2</div>
<div class="col-md-4">markets left 3</div>
<div class="col-md-4">markets left 4</div>
<div class="col-md-4">markets left 5</div>
<div class="col-md-4">markets left 6</div>
</div>
<div class="col-md-3">right 3</div>
<div class="col-md-3">right 4</div>
<div class="col-md-3">right 5</div>
<div class="col-md-3">right 6</div>
</div> <!-- /row -->
</div> <!-- /jumbotron -->
<div class="col-md-6">Copyright 2013 Deloitte Development LLC</div>
<div class="col-md-6 text-right">
<a href='#'>About</a> |
<a href='#'>Contact</a> |
<a href='#'>FAQ</a> |
<a href='#'>Help</a> |
<a href='#'>Support</a>
</div>
</div> <!-- /container -->
Seems to be working:
<div class="container">
<!-- Static navbar -->
<div class="navbar navbar-default col-lg-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src='../../../images/mpIcon.PNG' class='sm-icon' />
<!--<span class="glyphicon glyphicon-search"></span>-->
Menubar
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div><!--<span class="glyphicon glyphicon-star"></span>-->
</form>
</ul>
</div><!--/.nav-collapse -->
</div>
<!-- Main component for a primary marketing message or call to action -->
<!--<div class="jumbotron col-md-10 col-md-offset-1">-->
<div class="jumbotron col-md-12">
<div class="row">
<div class="col-md-6">
left top
</div>
<div class="col-md-3">right 1</div>
<div class="col-md-3">right 2</div>
<div class="col-md-6">
<div class="col-md-12">Markets</div>
<div class="col-md-4">markets left 1</div>
<div class="col-md-4">markets left 2</div>
<div class="col-md-4">markets left 3</div>
<div class="col-md-4">markets left 4</div>
<div class="col-md-4">markets left 5</div>
<div class="col-md-4">markets left 6</div>
</div>
<div class="col-md-3">right 3</div>
<div class="col-md-3">right 4</div>
<div class="col-md-3">right 5</div>
<div class="col-md-3">right 6</div>
</div> <!-- /row -->
</div> <!-- /jumbotron -->
<div class="col-md-6">Copyright 2013 Deloitte Development LLC</div>
<div class="col-md-6 text-right">
<a href='#'>About</a> |
<a href='#'>Contact</a> |
<a href='#'>FAQ</a> |
<a href='#'>Help</a> |
<a href='#'>Support</a>
</div>
</div> <!-- /container -->