I am using the following Bootstrap List Group with link and badge on my website:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div class="list-group">
<a href="/resources" class="list-group-item">
Africa <span class="badge badge-default pull-right">4 offers</span>
</a>
<a href="/resources" class="list-group-item">
More <span class="badge badge-default pull-right">14 offers</span>
</a>
<a href="/resources" class="list-group-item">
Another <span class="badge badge-default pull-right">123 offers</span>
</a>
</div>
Is it possible to make this list list multi column ? I need it as 3 responsive equal columns.
Yes it is, this is why we use Bootstrap.
Bootstrap includes a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes.
It’s based on a 12 column layout and has multiple tiers, one for each
media query range.
You can use it with Sass mixins or our predefined classes.
Grid system
/*added posotion absolute to the badge */
.badge {
position: absolute;
right: -15px;
}
list-group-item{
position:relative;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- using bootstrap grid system parent div is 12 columns -->
<div class="list-group col-lg-12">
<!-- using bootstrap grid system child div is 4 columns -->
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<a href="/resources" class="list-group-item">
Africa <span class="badge badge-default pull-right">4 offers</span>
</a>
</div>
<!-- using bootstrap grid system child div is 4 columns -->
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<a href="/resources" class="list-group-item">
More <span class="badge badge-default pull-right">14 offers</span>
</a>
</div>
<!-- using bootstrap grid system child div is 4 columns -->
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<a href="/resources" class="list-group-item">
Another <span class="badge badge-default pull-right">123 offers</span>
</a>
</div>
</div>
Related
I have a bootstrap 5 carousel with controls. My desired output is a slideshow with 2 items per slide and I would like to scroll through one image at a time.
From here:
To here:
The problem with solutions I have found which use the bootstrap grid system like the ones posed on this topic are that they rely on the correct multiple of items to work and they scroll two items per click, not one. A lot of the solutions I have found online are buggy or overcomplicated.
Is there a simple way to achieve this?
you mean like this ?
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active ">
<div class="col-12 row">
<div class="col-6" style="background-color: yellow; height: 10vh;"></div>
<div class="col-6 " style="background-color: blue; height: 10vh;"></div>
</div>
</div>
<div class="carousel-item">
<div class="col-12 row">
<div class="col-6" style="background-color: red; height: 10vh;"></div>
<div class="col-6 " style="background-color: green; height: 10vh;"></div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
This question already has answers here:
Twitter Bootstrap - add top space between rows
(21 answers)
Closed 1 year ago.
I am new to css and bootstrap. I am working on a legacy code which needs to add two row. The first row is a dropdown and a little help button. The second row is another button.
I want to have margin between the two rows using a proper way, i.e. using CSS or Bootstrap related classes etc. I ended up using <p></p> between the two div.row but somehow I think it's not the proper way. Below are my code snippets and the screenshots for before and after adding <p></p>. Please help to suggest a way without using <p></p>.
<div class="row">
<div class="col-xs-4">
<select id="selected_id" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option value="kitchen">Kitchen</option>
<option value="test01">test01</option>
<option value="test02">test02</option>
<option value="test03">test03</option>
</select>
</div>
<div class="col-xs-4">
<a id="manual_help">
<i class="fa fa-question-circle" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-4"></div>
</div>
<!-- This is the part used to create margin -->
<p></p>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<button id="add_id" class='btn btn-primary'>
<i class="fa fa-plus-circle"></i> <span class="add_text">
Add
</span>
</button>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<button id="edit_id" class='btn btn-primary'>
<i class="fa fa-pencil-alt"></i> <span class="edit_text">
Edit
</span>
</button>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
<button id="delete_id" class='btn btn-danger' style="display:block">
<i class="fa fa-trash-alt"></i> <span class="delete_text">
Cancel
</span>
</button>
</div>
</div>
Before adding <p></p>:
After adding <p></p>:
Just add a margin to the div.row elements. This can be as simple as saying all rows - get a 15px margin bottom with .row {margin-bottom: 15px} - and (change the the desired margin), or you could do .row:not(:last-child){margin-bottom: 15px} to control the spacing at the bottom of the container - or even do it as .row + .row {margin-top: 15px} which gives margin-top to every direct sibling row and prevents the spacing issue at the bottom of the container.
As a general rule -try not to use html elements to control spacing - do it with CSS (and I also include <br/> and <hr/> tags in that advice - they can be resplace with CSS be better control.
I added a parent element with a specific class and then used that class to name-space these rows so as to prevent all rows in your aplication ferom being affected. You could make a utility class and apply the styling for that - for re-use - eg: ".rows-with-margin" or something that makes sense.
Note that I changed the col-xs-12 to col-xs-4 ... nothing to do with the row spacing - just so that it rendered correctly for the small snippet window.
/* alternative 1 - margin bottom on all rows */
.form-select-wrapper .row {
margin-bottom: 15px
}
/* alternative 2 - margin bottom on all rows within the parent container - except the last one */
.form-select-wrapper.row:not(:last-child){
margin-bottom: 15px;
}
/* alternative 3 - margin top on direct sibling rows */
.form-select-wrapper .row + .row{
margin-top: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="form-select-wrapper">
<div class="row">
<div class="col-xs-4">
<select id="selected_id" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option value="kitchen">Kitchen</option>
<option value="test01">test01</option>
<option value="test02">test02</option>
<option value="test03">test03</option>
</select>
</div>
<div class="col-xs-4">
<a id="manual_help">
<i class="fa fa-question-circle" aria-hidden="true"></i>
</a>
</div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<button id="add_id" class='btn btn-primary'>
<i class="fa fa-plus-circle"></i> <span class="add_text">
Add
</span>
</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<button id="edit_id" class='btn btn-primary'>
<i class="fa fa-pencil-alt"></i> <span class="edit_text">
Edit
</span>
</button>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<button id="delete_id" class='btn btn-danger' style="display:block">
<i class="fa fa-trash-alt"></i> <span class="delete_text">
Cancel
</span>
</button>
</div>
</div>
</div>
<div class="card-body" style="opacity:0.99;"> <!-- stacking context’s root element [![enter image description here][1]][1]-->
<h5 style="padding-left:60px;position:relative;z-index:10;" class="card-title"><!-- stacking order: 1 -->
<i style="position:absolute;font-size:60px;color:red;top:-10px;left:-10px;" class="fa fa-play-circle-o" aria-hidden="true"></i> Video Title
</h5>
<div class="card-details-1 clearfix" style="position:relative;z-index:20;"><!-- stacking order: 2 -->
<div>
<span class="card-date float-left">19.02.17</span>
<a class="card-username float-right" href="#">Username</a>
</div>
</div>
<div class="card-details-2 clearfix">
<div>
<span class="card-duration float-left">7:56 min</span>
<span class="card-votes float-right">20 Votes</span>
</div>
</div>
<a class="card-btn" href="#">View Video</a>
</div>
I have applied an opacity value less than 1 to the div.card-body in order to form a new stacking context.
h5 and div.card-details-1 are positioned and have a z-index value.
Why I can't get the black-colored effect shown in the picture?
I'm trying to fill carousel-background image fill carousel. But I'm not able to access tag from css.
<div id="carouselSlider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<!-- data-slide-to part -->
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-background"><img src="img/portfolio/fullsize/1.jpg"></div>
<div class="carousel-container">
<div class="carousel-caption">
<h2>We are xyz</h2>
<p>We help you to blah blah blah!</p>
Get Started
</div> <!--carousel-content-->
</div> <!--carousel-container-->
</div> <!--carousel-item-->
<div class="carousel-item">
<!-- similar content with <img>-->
</div> <!--carousel-item-->
<div class="carousel-item">
<!-- similar content with <img>-->
</div> <!--carousel-item-->
</div> <!--carousel-inner-->
<a class="carousel-control-prev" href="#carouselSlider" 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="#carouselSlider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!--carousel-->
CSS File:
#carouselSlider .carousel-inner .carousel-item .carousel-background img{
width: 100%;
height:400px;
}
I'm not able to edit image. Also is there a way to fill image in carousel without stretching it?
You can add classes to images. That line of code should look like
<div class="carousel-background"><img class="whateveryouwant" src="img/portfolio/fullsize/1.jpg"></div>
You're trying to navigate through your nested structure using classes but that's not how it works. Because you only have one image inside your carouselSlider div you could simply access it using:
#carouselSlider img {<your css here>}
But this will probably break when you have more images in there. If you can change that HTML you should probably add a class to your img or an id to to one of those inner divs and access it directly.
To avoid the image getting stretched check out the "background-size" CSS property. Either 'cover' or 'contain' should do it for you.
I have a carousel which is actually a form.
One carousel item is a multi selectbox
How can i auto increase the height on only one carousel-item as the height of the multi select box increase.
The image 1 is how i get.
Image 2 how i want it.
Much thanks for much insights. I cannot refresh the carousel. It will unset my form inputs
<div class="row no-gutters" id="mob-carousel-row" [style.height.px]="mobileCarouselRowHeight">
<div class="col-1 col-sm-1">
<a href="#carouselExampleIndicators" role="button" data-slide="prev">
<i class="fa fa-angle-left mobile-form-nav" ></i>
</a>
</div>
<div class="col-10">
<div
#plMobileCarouselForm
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
data-interval="false">
<div class="carousel-inner" role="listbox" id="mob-carousel">
<div class="carousel-item active">
<div class="form-group md-form mob inputbox">
<!-- first input box item -->
</div>
</div>
<div class="carousel-item active">
<div class="form-group md-form mob muti-select">
<!-- muti select box item need auto height -->
</div>
</div>
<div class="carousel-item active">
<div class="form-group md-form mob inputbox">
<!-- first input box item -->
</div>
</div>
</div>
</div>
</div>
<div class="col-1 col-sm-1">
<a href="#carouselExampleIndicators" role="button" data-slide="next">
<i class="fa fa-angle-right mobile-form-nav" ></i>
</a>
</div>
</div>
This is intended as a comment but I can't comment yet.
Since you haven't provided your CSS it's just guess work.
However, if you set the height to auto for the container that contains the input forms or select boxes, it will adjust itself as more options become available.
.carousel-item active {
height: auto;
}