bootstrap listgroup not centered - html

I created a listgroup, but it is not centering on the page. I am able to manipulate the text within each list group to align it left, but the whole element is appearing left on the page. Nothing has allowed me to center this on the page.
CSS:
.list-group{
width:40%;
text-align: center;}
HTML:
<div class="span12">
<ul class="list-group">
<li class="list-group-item">
<span class="badge">0</span>
<b>Stuff1:</b>
</li>
<li class="list-group-item">
<span class="badge">0</span>
<b>Stuff2: </b></li>
<li class="list-group-item">
<span class="badge">0</span>
<b>Stuff3:</b></li>
</ul>
</div>

If i correctly understand, you need to put in center of your page your <div>.
In bootstrap 3 is no css to do it :(
I use this class to <div> in center
.centerBlock {
float: none;
margin-left: auto;
margin-right: auto;
}
But if you want to align you text, you could use standart classes for it like text-center

Answer here.
Use Following:
display: block;
margin: 0 auto;

Use bootstrap grid classes as
<div class="row">
<div class="col-md-offset-4 col-md-4">
<ul class="list-group">
<li class="list-group-item">
<span class="badge">0</span>
<b>Stuff1:</b>
</li>
<li class="list-group-item">
<span class="badge">0</span>
<b>Stuff2: </b>
</li>
</ul>
</div>
</div>

Related

Menu is underneath content of page (z-index)

I am working on a clients website on Shopify and for some reason the dropdown menu seems to go underneath the product display and filter. I have tried changing the z-index but have had no luck.
Would anyone know what the issue might be? Here is a link to the page having trouble: https://livingtextiles.com/collections/test-collection
<header id="header" style="background-color:#fff!important;">
<div class="header-top pbf-header-top">
<div class="container pbf-container">
<div class="col-md-10 col-sm-9 col-xs-12">
<div class="logo">
<img src="https://cdn.shopify.com/s/files/1/1568/4679/files/wholesale-logo.png?16165857088723477752">
</div>
<nav class="menu-top">
<ul>
<li class="level-1 dropdown">
<a class="dropdown-toggle a1 pbf-ws-text" data-toggle="dropdown" title="Living Textile Brands" style="color:#0c3056!important;font-size: 23px;padding-right:20px;">SHOP BY BRANDS</a>
<ul class="menu-level2 dropdown-menu pbf-column">
<div>
<li class="level2"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/living-textile-ws-logo.png?15789627674492600681"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/lolli-living-ws-logo.png?11306798353806545224"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/poppi-living-ws-logo.png?11306798353806545224"></li>
</div></ul>
<li class="level-1 dropdown">
Collections
<ul class="menu-level2 dropdown-menu">
/*** CSS ***/
#header {
display: block;
float: left;
width: 100%;
}
set position:relative and z-index:99 to the #header, this will fix your problem
#header {
position:relative;
z-index:99;
}

CSS HTML to replace glyphicon with img

I would like to replace the glyphicon with an img tag.
Currently the drop down is written as below
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
<strong>Desmond</strong>
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul class="dropdown-menu">
<li>
<div class="navbar-login">
<div class="row">
<div class="col-lg-4">
<p class="text-center">
<span class="glyphicon glyphicon-user icon-size"></span>
</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Desmond Soh</strong></p>
<p class="text-left small">Desmond#mail.com</p>
<p class="text-left">
Profile
</p>
</div>
</div>
</div>
</li>
<li class="divider navbar-login-session-bg"></li>
<li class="navbar-login-session-bg">
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-12">
<p>
Logout
</p>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
How do i change the line of code to allow an img to fit nicely over the glyphicon? I believe I need a css to render it to a specific size as well. I have tried many ways but to no avail. Please help me thank you.
You need to replace the span tag with either a img or div tag:
Using an IMG tag and href to the preferred image
Using a DIV tag and CSS background property
Here's an example by replacing the span tag with .glyphicon class:
HTML
<div class="imgPlaceholder></div>
CSS
.imgPlaceholder{
background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
background-color:#0C0C0C;
background-size: 100% 100%;
height:100px;
width:100px;
}

Insert image at right of dropdown on Boostrap

I'm using Bootstrap to create a navbar in the top of the page, but i'm facing some problems:
After opening the navbar dropdown, I need to have a option list, and a image positioned to the right of the list. This image needs to have the same height of the list, just like in the following image (in portuguese, but easily understandable).
I achieved this setting a fixed height and width on the image, but the list can grow up and isn't a good option adjust it manually.
Another solution is to insert a div containing the list and the image, and set the image size to 100%, but when I do this, the dropdown isn't achieved anymore (I think i'm breaking the structure that Bootstrap uses to toggle the dropdown, am I right?).
How can I achieve this solution?
<div id="navbar" class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav top-elements">
<li id="dropdown-produtos" class="dropdown">
Nossos Produtos<span class="caret top-caret"></span>
<!-- div was here --> <ul class="dropdown-menu dropdown-menu-produtos">
<li class="dropdown-item-active">
texto1
<ul class="dropdown-menu img-dropdown">
<img src="assets/img.png">
</ul>
</li>
<li class="dropdown-item">
texto2
</li>
<li class="dropdown-item">texto3</li>
<li class="dropdown-item">texto4</li>
<li class="dropdown-item">texto5</li>
</ul>
</li>
</ul>
</div>
This should work:
<ul class="nav navbar-nav">
<li>Elemento 1</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">DropDown<span class="caret"></span></a>
<ul class="dropdown-menu another-class">
<!-- ROW -->
<div class="col-md-12">
<!-- Column 1 -->
<div class="col-md-6">
<ul class="list-unstyled">
<li>Texto 1</li>
<li>Texto 2</li>
<li>Texto 3</li>
</ul>
</div>
<!-- Column 2 -->
<div class="col-md-6">
<div class="drop-image">
<img src="./img/img.jpg" class="img-responsive" />
</div>
</div>
</div>
</ul>
</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
Basically what I'm doing is create a div with a full width inside the dropdown element that comes as default in Boostrap. Inside this Full width row I create two columns with bootstrap col-md-6 class (you can do this with col-lg or col-sm or col-xs too) Inside this columns I add my content normally.
I created a class in the column 2 named "drop-image"; use this class to modify the img inside.
Hope it helps!
Btw, don't forget to style your dropdown (in the example I mark it with a class named another-class) so you define the position and width.
This might solve your problem, it's based off this plugin Yamm3!. See example Snippet.
Change this CSS rule if you need to make the dropdown wider because of the length of the link text. >
.list-unstyled, .list-unstyled ul {
min-width: 180px
}
body {
padding-top: 60px;
color: #666;
}
/* menu styes */
.list-unstyled,
.list-unstyled ul {
min-width: 180px
}
.list-unstyled > li {
padding-top: 10px;
}
.list-unstyled > li > a {
color: #555;
text-decoration: none;
}
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
position: static;
}
.yamm .container {
position: relative;
}
.yamm .dropdown-menu {
left: auto;
background: #f5f5f5;
}
.yamm .yamm-content {
padding: 0 30px 10px 30px;
}
.yamm .yamm-content .nav-title {
margin-left: 15px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
left: 0;
right: 0;
}
#media (max-width: 767px) {
.yamm-content .list-unstyled > li img {
margin-top: -180px;
float: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar yamm navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>Grande Menu
</div>
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Classic list -->
<li class="dropdown">Nossos Produtos<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<h4 class="nav-title"><strong>A partida de um</strong></h4>
<ul class="col-sm-4 list-unstyled">
<li>Vinculando um
</li>
<li>Ligando dois
</li>
<li>Ligação de três
</li>
<li>Quatro ligação
</li>
<li>Ligação cinco
</li>
<li>Seis ligação
</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<img src="http://placehold.it/150x150/ff0/fff">
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<!-- Classic list -->
<li class="dropdown">Nossos Produtos Dois<b class="caret"></b>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<h4 class="nav-title"><strong>A partida de um</strong></h4>
<ul class="col-sm-4 list-unstyled">
<li>Vinculando um
</li>
<li>Ligando dois
</li>
<li>Ligação de três
</li>
<li>Quatro ligação
</li>
<li>Ligação cinco
</li>
<li>Seis ligação
</li>
</ul>
<ul class="col-sm-2 list-unstyled">
<li>
<img src="http://placehold.it/150x150/ff0/fff">
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="alert alert-warning">Olá</div>
</div>

Breadcrumb in single line

I am using Twitter Breadcrumb in my html page. But the breadcrumb keeps appearing in a new line. How can I make it come next to the glyphicon?
This is the div section:
<div class="col-md-3 well pre-scrollable scroll-pane">
<span class="glyphicon glyphicon-folder-close"></span>
<ul class="breadcrumb list-unstyled">
<li ng-repeat="crumb in breadcrumb track by $index">
{{crumb}}
</li>
</ul>
<hr>
<p>
<ul ng-repeat="node in nodes" class="list-unstyled">
<li ng-repeat="value in node">{{value}}</li>
</ul>
</p>
</div>
How it looks now:
There are unwanted spaces in the top and bottom. But I want the list to appear next to the glyphicon as if they are in a new line.
Just add some CSS inline. <ul> elements are automatically block-level elements. I believe that Bootstrap automatically adds glyphicons to be display: inline-block as well so it can apply with and margins to the icon.
Fiddle for you
span.glyphicon-folder-close,
ul.breadcrumb {
display: inline;
}
<div class="col-md-3 well pre-scrollable scroll-pane">
<span class="glyphicon glyphicon-folder-close"></span>
<ul class="breadcrumb list-unstyled">
<li>node1
</li>
<li>node2
</li>
<li>node3
</li>
<li>node4
</li>
</li>
</ul>
.....
.....
Addition:
Here's another way of doing it. Wrap the span and ul in it's own separate container so they float together. You have to remove the padding for the ul.breadcrumb as it's auto applied.
Add containers fiddle
ul.breadcrumb {
padding: 0;
}
<div class="col-md-3 well pre-scrollable scroll-pane">
<div class="col-xs-1">
<span class="glyphicon glyphicon-folder-close"></span>
</div>
<div class="col-xs-11">
<ul class="breadcrumb list-unstyled">
<li>node1
</li>
<li>node2
</li>
<li>node3
</li>
<li>node4
</li>
</li>
</ul>
</div>
....
....
Addition #3 (worked best for OP)
Here's an even better way. Just use psuedo selector for the breadcrumb and remove the span altogether. Also remove the <hr> tag and add border to the breadcrumb itself
Fiddle w/ psuedo
ul.breadcrumb {
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
ul.breadcrumb:before {
position: absolute;
content: '\e117';
font-family: 'Glyphicons Halflings';
left: -10px;
top: 8px;
width: 20px;
height: 20px;
}
<div class="col-md-3 well pre-scrollable scroll-pane">
<ul class="breadcrumb list-unstyled">
<li>node1
</li>
<li>node2
</li>
<li>node3
</li>
<li>node4
</li>
</li>
</ul>
....
....
It may be due to the parent div width is not enough for show all.

Bootstrap CSS Alignment

I have been trying to get some alignment to work but I am having a hard time being successful. I'm not sure if there is already a CSS style in bootstrap for vertical alignment or not but that is what I am trying to accomplish.
I have a DIV (.well class) with an image and some text inside it. The Image aligns fine as its responsive so the height and placement is good. However, I am trying to align the button and Text vertically in the middle.
Here is a jsFiddle: http://jsfiddle.net/6z9skpeh/
<div class="col-md-6">
<div class="well wellFriends">
<div class="row">
<div class="col-md-4 friendPic">
<img src="http://oi62.tinypic.com/289j41s.jpg" class="img-responsive">
</div>
<div class="col-md-8 friendDetails">
<div class="row">
<div class="col-md-6"><strong>Bob Smith</strong>
<br><em>Department Name</em>
</div>
<div class="col-md-5 pull-right">
<!-- Single button -->
<div class="btn-group pull-right">
<button type="button" class="btn btn-primary dropdown-toggle pull-right" data-toggle="dropdown" aria-expanded="false">Friends <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is what I have so far:
This is what I am trying to do:
You can try like this: demo
css:
.v_align {
font-size: 0;
}
.v_align >[class*="col"] {
float: none;
font-size: 14px;
display: inline-block;
vertical-align: middle;
}
HTML:
<div class="row v_align">..</div>