I have a div which is 200px in height. How do I divide the ul items in equal rows? They always align on top. I have colored the div green to make it obvious. Eventually I would be using ngFor in my ul, so I do not know how many rows are going to be there
<div style="height:200px">
<ul class="list-group list-group-flush">
<li class="list-group-item border-0 bg-transparent ">
test
</li>
<li class="list-group-item border-0 bg-transparent">
test1
</li>
</ul>
</div>
If you want to divide the content of your div then its best you should use table
<table style="height: 200px;">
<tbody>
<tr *ngFor="let hero of heroes">
<td class="align-baseline">
<td>{{hero.name}}</td>
</td>
</tr>
</tbody>
</table>
This is another way by which can give height to li
<ul class="list-group list-group-flush" style="line-height:180%">
<li class="list-group-item border-0 bg-transparent ">
test
</li>
<li class="list-group-item border-0 bg-transparent">
test1
</li>
</ul>
Would a flexbox solution work for you?
https://codepen.io/panchroma/pen/ExWpdeK
HTML
<div class="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
CSS
.wrap ul {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 200px;
}
.wrap {
background-color: green;
}
Related
this code on mobile view works fine but on desktop view
see the snippet here how the dogs tab content (another collapsible card ,click on Dog 1 red header) can't collapse
<div class="card-body">
<ul class="list-group">
<li class="list-group-item text-bg-danger" aria-current="true" data-bs-toggle="collapse" role="button" data-bs-target="#dog1">Dog 1</li>
<div id="dog1" class="collapse">
<li class="list-group-item d-flex justify-content-between align-items-center">Eyes <span>2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">Tail<span>short</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">Color <span>black</span>
</li>
</div>
</ul>
<br>
</div>
All collapses in .responsive have display-block set
.responsive-tabs .card .collapse {
display: block;/*OK*/
}
Solution: only set first-child using >
.responsive-tabs .card > .collapse {
display: block;
}
My problem is this: when inserting a new button in navbar the User Name goes to the bottom line. My goal is for everything to be aligned on the same line.
I have already used display: inline-block and flex-direction: row but it did not work. Can someone help me?
HTML
<div class="col-md-10 p0">
<div class="collapse navbar-collapse" id="min_navbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Tabelas</li>
<li>Registo</li>
<li class="dropdown submenu">
Quem Somos
<ul class="dropdown-menu other_dropdwn">
<li>About Us</li>
<li>About Us-2</li>
</ul>
</li>
<li class="dropdown submenu">
Serviços
<ul class="dropdown-menu other_dropdwn">
<li>Services</li>
<li>Services-2</li>
</ul>
</li>
<li class="dropdown submenu">
Notícias
<ul class="dropdown-menu">
<li>Últimas Notícias</li>
<li>Notícia Singular</li>
</ul>
</li>
<li>Contactos</li>
<li>Login</li>
<li><i class="fa fa-search"></i></li>
<li class="dropdown submenu">
<img src="https://cdn4.iconfinder.com/data/icons/user-avatar-flat-icons/512/User_Avatar-44-512.png" class="rounded circle" style="width: 50px; height: 50px;" /> Nome
<ul class="dropdown-menu">
<li>Perfil</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
Your navbar may be too big, so it won't work. But, if it is not too big, this might work:
Here, add a class. I chose floater:
<li class="dropdown submenu floater">
<img src="https://cdn4.iconfinder.com/data/icons/user-avatar-flat-icons/512/User_Avatar-44-512.png" class="rounded circle" style="width: 50px; height: 50px;" /> Nome
<ul class="dropdown-menu">
<li>Perfil</li>
<li>Logout</li>
</ul>
</li>
In your CSS, do:
.floater {
float: right;
}
You may have some extra margin or padding somewhere in your code, so I would check that.
Please, consider moving from float to flexbox or grid to set position of elements!* We have "killer-features" in CSS nowadays, like Flexbox or even better CSS Grid (but there's some lacks of browser support). Yep, it's quite difficult to handle it at the begining, but when you'll understand how to roll with it - you'll love it!
I have already used display: inline-block and flex-direction: row but
it did not work. Can someone help me?
You can't combine display: inline-block with flex-direction, because you're trying to combine flex with blocks. You should use display: inline-flex instead.
HTML Markup:
<ul class="d-flex">
<li>Lorem, ipsum.</li>
<li>Ad, quas.</li>
<li>Recusandae, minima.</li>
<li>Tempore, sint.</li>
<li>Consequuntur, porro.</li>
<li>Ipsum, at!</li>
</ul>
SCSS Markup:
.d-flex {
display: inline-flex;
}
ul {
li {
display: inline-flex;
margin: 0 10px;
padding: 2px 8px;
border: 1px solid black;
border-radius: 4px;
}
}
Here you can try with flex:
https://codepen.io/dstolarski/pen/XOYEwR
I want to eliminate the the margin in the following nested list-items by forcing the inner list-items to fill their parent list-item. See JSFiddle:
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
This is the heading
</div>
<div class="panel-body">
<ul class="list-group parentList">
<li class="list-group-item">
Hello
</li>
<li class="list-group-item nomargin">
<ul class="list-group childList">
<li class="list-group-item nomargin">
Hello.Child 1
</li>
<li class="list-group-item child">
Hello.Child 2
</li>
</ul>
</li>
</ul>
</div>
</div>
And here is the css:
.nomargin {
margin-left: 0px !important;
margin-right: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important
}
.parentList {
display: inline-block;
position: relative;
}
.childList {
width: 100%;
}
These spaces caused by padding ,So you need to add padding: 0 not margin
Demo
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>
My question is how you can center the pills?
I've tried to add center block around and also to change the float:left to float:center but nothing helps.
This has gotten much simpler! You just need to use the text-center class on the container, and apply display:inline-block to the ul. Just make sure you have a line break or paragraph tag separating the nav from any other elements within the container.
Done! 2 class additions, 1 line of CSS (don't modify the bootstrap css file!).
HTML:
<div class="col-md-12 text-center">
<p>Copyright stuff</p>
<ul class="nav nav-pills center-pills">
<li>Footer nav link</li>
<li>Footer nav link</li>
</ul>
</div>
CSS:
.center-pills { display: inline-block; }
Edit 2015: As Artur Beljajev has brought up, Flexbox support is now common enough that you may want to use that instead:
.center-pills {
display: flex;
justify-content: center;
}
If you'd like variable width pills in a variable width container, I'd suggest using the inline-block display type and adding a class to the pill container.
Here is how I extended bootstrap for centering pills.
CSS:
.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; } /* IE6 */
*+html .centered-pills ul.nav-pills { display:inline; } /* IE7 */
HTML:
<div class="row">
<div class="span12 centered-pills">
<ul class="nav nav-pills">
<li>derek</li>
<li>brooks</li>
<li>is</li>
<li>super</li>
<li class="active">awesome</li>
</ul>
</div>
</div>
Or flexbox approach:
.nav-pills {
display: flex;
justify-content: center;
}
If you want the pills to be centered instead of left aligned you will need to change the css. You will need to specifiy a width and change the margin to be auto.
For example:
.tabs, .pills {
margin: 0 auto;
padding: 0;
width: 400px;
}
While the answer of #minaz works for a list with a known width, i'd propose a different solution which actually works even if you change the content of the list:
.tabs, .pills {
text-align: center;
}
.tabs li, .pills li {
float: none;
}
Or in SCSS:
.tabs, .pills {
text-align: center;
li { float: none; }
}
This will center the text inside the list, and resets the float property for the list items so they are affected by the text-align property.
A simple solution with Bootstrap 4
Use justify-content-center at <ul> nav
Example:
#import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="mt-5">
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="card text-white bg-success mb-3 mx-2 px-2">
<h1>Hi</h1>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<div class="card text-white bg-info mb-3 mx-2 px-2">
<h1>Hi</h1>
</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="card text-white bg-danger mb-3 mx-2 px-2">
<h1>Ni Hao</h1>
</div>
</div>
</div>
</div>
Bootstrap 4 solution is very easy:
<ul class="nav justify-content-center">
https://getbootstrap.com/docs/4.0/components/navs/