I have the following code section and I'm trying to put the badge on the rightmost part of the list-item, but somehow it keeps staying next to the text whatever I use ( style="float: right;" / class="pull-righ" / class="float-righ")
<div class="row" style="margin-top: 30px;">
<div class="col-2">
<ul class="list-group">
<li class="list-group-item active"><h4>Groups</h4></li>
#foreach($project->groups()->get() as $key=>$group)
<li class="list-group-item list-group-item-action" id="{{$group->name}}">{{$group->name}}<span class="badge badge-default pull-right"> {{$group->jobs()->count()}}</span></li>
#endforeach
</ul>
</div>
</div>
DEMO: https://jsfiddle.net/v4udh4Lc/7/
Related
<div class="card-body p-0">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between" th:each="extraConfig : ${extraConfigsPage.content}">
<div>
<a class="item-link">
<span class="item-name ml-2" th:text="${extraConfig.description}"></span>
</a>
</div>
<div>
<a class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteReportModal">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</li>
</ul>
</div>
This is my code. My problem is that the first item in the list (the first div) is not aligned in the center of the icon that exists in the same row. I want the first item to be aligned totally left and in the center of the row, and the second one to be aligned totally right and again in the center (with this code the second item is perfectly aligned).
I don't want to use extra CSS, I want to use only bootstrap classes.
Any ideas? Thanks in advance!
If you could add the bootstrap class align-baseline to your anchor tag for the icon, it will move the icon up to the center of the list item, and that should line up the icon with the center of your left-side tag:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="card-body p-0">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between">
<div>
<a class="item-link">
<span class="item-name ml-2">Fling</span>
</a>
</div>
<div>
<a class="btn btn-outline-danger align-baseline" data-toggle="modal" data-target="#deleteReportModal">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</li>
</ul>
</div>
I removed the th: so the snippet has plain HTML and I added a word with a descender in the first tag for comparison.
We have a custom eCommerce website and below is the code for the categories list which is a drop-down menu.
<div id="nav-header" class="nav-header navbar-default">
<div class="container ">
<div class="row">
<nav class="ms-mb-0" role="navigation">
<div class="col-sm-3 col-md-3">
<!--navheader sidebar categories on home page-->
<div class=" hover-dropdown dropdown vertical-megamenu navheader-sidebar-category ">
<div class="ms-br-zero dropdown-toggle btn-primary" type="button"
id="dropdownMenu1" data-toggle="dropdown">
<div id="menu-icon">
{{'SHOP BY CATEGORIES'|msTranslate}}
<i class="fa fa-bars pull-right ms-pt-xs"></i>
</div>
</div>
<ul
class="list-group nav-ul-color dropdown-menu ms-br-zero ms-br-none ms-pt-0 ms-pb-0 ms-mt-0 ms-w-full ms-z-index20 ms-pos-absolute"
role="menu" aria-labelledby="dropdownMenu1" aria-expanded="true"
data-ng-init="show={}">
<li class="list-group-item ms-br-zero level1" role="presentation "
data-ng-repeat="category in navigation.header.links">
<a href="{{category.url}}" class="ms-p-0 ms-ws-normal"
title="{{category.title|msTranslate}}">
{{category.title}}
<span data-ng-if="category.children.length ">
<i class="fa fa-angle-right pull-right">
</i>
</span>
</a>
<ul ng-if="category.children.length" class="list-unstyled level2 vertical"
ng-style="{'column-count':{{getcount(category)}}}">
<div class=" ms-p-xs dropdownMenu-lvl2">
<div class="dropdownMenu-lvl3 ms-pr-xs ms-lh-25 ms-mb-s "
ng-repeat="subcategory in category.children">
<a href="{{subcategory.url}}"
title="{{subcategory.title|msTranslate}}">
{{subcategory.title}}
<i ng-if="subcategory.children.length"
class="fa fa-caret-left">
</i>
</a>
<ul class="list-unstyled level3"
ng-if="subcategory.children.length">
<li ng-repeat="subcategory2 in subcategory.children"
class="subcategory2 ">
<a href="{{subcategory2.url}}"
title="{{subcategory2.title}}"
class="level3-links ">
{{subcategory2.title}}
</a>
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="list-group-item ms-br-zero level1" role="presentation ">
<a href="/allcategories" class="ms-p-0 ms-ws-normal"
title="{{'SEE ALL CATEGORIES'|msTranslate}}">
{{'SEE ALL CATEGORIES'|msTranslate}}
</a>
</li>
</ul>
</div>
</div>
If the language is English, subcategories show on the right side which is perfect as below:
But if the language is Arabic, subcategories show on the right side which is wrong because it is overflowing from the screen:
For Arabic, the menu should show on the left side of the screen.
I tried the following in the custom CSS but still the menu in Arabic doesn't show on the left side:
body .dropdownMenu1.dropdownMenu-lvl2,
body .dropdownMenu-lvl2.dropdownMenu-lvl3 {left:-250px !important;}
How to correct the code so that the menus in Arabic show on the left side.
Sorry if it's a stupid question, I'm only starting to learn HTML, CSS and bootstrap. I've been trying to get a five-column footer on bootstrap.
So far I have achieved the five columns, but after hours of trying different things I have given up. I can't seem to figure out how to align the items in these columns.
You can see the full site here:
https://stevenarroyave.github.io/UPTAKE/
and the repo here:
https://github.com/stevenarroyave/UPTAKE
this is what I want it to look like:
https://drive.google.com/file/d/1bp2ZitBU4VGjPLhevdDZPBG5BeyEAO5X/view?usp=sharing
<footer>
<div class="col-sm-12 text-left">
<div class="row">
<div class="col-sm-7 five-three">
<div class="row">
<div class="col-sm-4">
<img id="logo" class="logo" src="img/FooterLogo.png"></img>
</div>
<div class="col-sm-4 text-left">
<h5 class="text mb-4">UPTAKE</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<h5>About us</h5>
<li class="list-inline-item">
<h5>Contact Us</h5>
</li>
<li class="list-inline-item">
<h5>Blog</h5>
</li>
</ul>
</div>
<div class="col-sm-4 text-left">
<h5 class="text mb-4">HELP</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<h5>FAQ</h5>
<li class="list-inline-item">
<h5>Tips and suggestions</h5>
</li>
<li class="list-inline-item">
<h5>Customer service</h5>
</li>
</ul>
</div><!-- end inner row -->
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6 text-left">
<h5 class="text mb-4">LEGAL</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<h5>Privacy Notice</h5>
<li class="list-inline-item">
<h5>Terms of use</h5>
</li>
<li class="list-inline-item">
<h5>How to use Uptake</h5>
</li>
</ul>
</div>
<div class="col-sm-6 text-left">
<h5 class="text mb-4">LANGUAGE</h5>
<ul class="list-inline mb-0">
<li class="list-inline-item">
<input type="text" placeholder="English">
</li>
</ul>
</div>
</div><!-- end inner row -->
</div>
</div><!-- end outer row -->
<div class="row">
<div class="col-12 text-right">
<hr>
<h5>Follow us!</h5>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
</footer>
As of now, I achieved the 5 columns, but as you can see, they all start at different heights, I'd like them to start at the same height, and stop the logo on the first column from resizing when resizing the window.
I also don't know how to get the pink icons on the bottom to show on the same line next to "Follow us!"
Thanks in advance for any help.
I am found some bug and fixed here screenshot change using the red mark arrow.
And your output is:
You need to defined align item to baseline. Try it specifically for footer row.
.row { align-items: baseline;}
I'm new to the world of UI design. I'm trying to get a basic page up & running with bootstrap. What I'm after is the underlying reason for using bootstrap which is to scale the page & it's components depending on the device on which the web page is loaded. I'm failing just with this very requirement :)
Here's the code I'm trying to get working
<div class="container-fluid">
<div class="row-fluid ">
<div class="row row-eq-height ">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
<a id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1 " style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
</div>
<div class="col-xs6 col-sm-6 col-md-6 col-lg6 bg-primary">
<div class="page-header text-center" >
<p> <h2>BOOTSTRAP TRIAL </h2> </p>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
<h3> LOGGED IN</h3>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg- bg-primary text-right pull-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
</a>
<ul class="dropdown-menu">
<li>Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></li>
<li class="divider"></li>
<li>User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></li>
<li class="divider"></li>
<li>Messages <span class="badge pull-right blue"> 42 </span></li>
<li class="divider"></li>
<li>Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></li>
<li class="divider"></li>
<li>Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
This code doesn't re-size all the contents of the web page being loaded. I see just half the contents when I click on "restore" button of the browser.
A few questions
1) My understanding of bootstrap is that it is mobile first technology meaning, if we were to develop for small devices, then it could scale up to anything big. Please correct me if I've misunderstood this. Hence, Does one have to specify, -xs-, -md- & -lg- for all the elements in question to get the re-size working or is specifying -xs- enough? If not, which of these should I specify so that the scaling automatically happens across any device.
2) Is responsive web design only about handling content re-sizing?
I'd highly appreciate any help to get me moving here please.
Can you please check this code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row-fluid">
<div class="row row-eq-height">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary pull-left">
<a id="home_btn" href="#"><i class="material-icons col-xs-1 col-sm-1 col-md-1 col-lg-1" style="padding-top: 12px;font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000; text-align: left;">home</i></a>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 bg-primary">
<div class="page-header text-center" >
<p> <h2>BOOTSTRAP TRIAL </h2> </p>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-center bg-success" style="padding-top: 20px;">
<h3> LOGGED IN</h3>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 bg-primary text-right pull-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="material-icons" style="font-size:70px;color:lightblue;text-shadow:2px 2px 4px #000000;text-align:right;padding-left: 215px; ">account_circle</i>
</a>
<ul class="dropdown-menu">
<li>Account Settings <span class="glyphicon glyphicon-cog pull-right blue"></span></li>
<li class="divider"></li>
<li>User stats <span class="glyphicon glyphicon-stats pull-right blue"></span></li>
<li class="divider"></li>
<li>Messages <span class="badge pull-right blue"> 42 </span></li>
<li class="divider"></li>
<li>Favourites Snippets <span class="glyphicon glyphicon-heart pull-right blue"></span></li>
<li class="divider"></li>
<li>Sign Out <span class="glyphicon glyphicon-log-out pull-right blue"></span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Giving up on get all collapses closed when click another collapse.
I have several collapse groups running as a multi-level menu generated by php/mysql.
Basically it works very well, except for one tiny issue.
When i click a parent element from another group, i want all other parents closed.
A full HTML copy of my running menu can be seen here : jsFiddle
HTML:
<div class="panel panel-default">
<div class="panel-heading">Categories</div>
<div id="menu" class="panel-body">
<div parentid="cPath_1" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">Hardware<span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span>
</li>
<div id="cpath_1" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_17" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">CDROM Drives<a class="collapsed" href="#cpath_17" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
</li>
<div id="cpath_17" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_22" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">Testcat<a class="" href="#cpath_22" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
</li>
<div id="cpath_22" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_23" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Testcat2
</li>
</div>
</div>
</div>
</div>
</div>
<div parentid="cPath_4" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Graphics Cards
</li>
</div>
<div parentid="cPath_8" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Keyboards
</li>
</div>
<div parentid="cPath_16" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Memory
</li>
</div>
<div parentid="cPath_9" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Mice
</li>
</div>
<div parentid="cPath_6" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Monitors
</li>
</div>
<div parentid="cPath_5" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Printers
</li>
</div>
<div parentid="cPath_7" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Speakers
</li>
</div>
</div>
</div>
<div parentid="cPath_2" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-info">Software<a class="collapsed" href="#cpath_2" data-toggle="collapse" data-parent="#cpath_2"><span class="toggleMe glyphicon pull-right glyphicon-chevron-right"></span></a>
</li>
<div id="cpath_2" class="list-group collapse" style="margin-bottom: -2px; height: 0px;">
<div parentid="cPath_19" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Action
</li>
</div>
<div parentid="cPath_18" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Simulation
</li>
</div>
<div parentid="cPath_20" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Strategy
</li>
</div>
</div>
</div>
<div parentid="cPath_3" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-info">DVD Movies<span class="toggleMe glyphicon glyphicon-chevron-right pull-right"></span>
</li>
<div id="cpath_3" class="list-group collapse" style="margin-bottom: -2px;">
<div parentid="cPath_10" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Action
</li>
</div>
<div parentid="cPath_13" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Cartoons
</li>
</div>
<div parentid="cPath_12" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Comedy
</li>
</div>
<div parentid="cPath_15" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Drama
</li>
</div>
<div parentid="cPath_11" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Science Fiction
</li>
</div>
<div parentid="cPath_14" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Thriller
</li>
</div>
</div>
</div>
<div parentid="cPath_21" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-warning">Gadgets
</li>
</div>
</div>
</div>
JS:
//if click chevron's
$('.toggleMe').click(function(){
var parent = $(this).closest('.list-group').attr('parentid').split( "_" )[1];
$(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-right');
$(this).closest('.list-group-item').toggleClass('list-group-item-danger list-group-item-info');
//$( '.list-group' ).not('#cpath_'+parent+'').toggle();
//alert('cPath_'+parent); //this is the required main value , all elements inside this should stay open if are open
});
on first load see all parents.
when click hardware chevron, menu expands.
But now when decide to click software , hardware stays open.
First of all, the collapsing of other panels is dependent on the DOM structure. Each panel should be wrapped in a div with the class '.panel'. You can refer the issue for more details.
Second, the data-parent attribute should refer to the element that wraps all the panels, which you want only one of them to be open.
<div id="menu" class="panel-body">
<div parentid="cPath_1" class="list-group panel" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">Hardware<span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span>
</li>
<div id="cpath_1" class="list-group collapse in" style="margin-bottom: -2px; height: auto;">
<div parentid="cPath_17" class="list-group" style="margin-bottom: -2px;">
<li class="list-group-item list-group-item-danger">CDROM Drives<a class="collapsed" href="#cpath_17" data-toggle="collapse" data-parent="#cpath_1"><span class="toggleMe glyphicon pull-right glyphicon-chevron-down"></span></a>
</li>
</div>
</div>
</div>
</div>
Here is your modified code http://jsfiddle.net/zbrhu/1/