Lets say I have the following:
<div class="card">
<ul class="list-group list-group-flush ">
<li class="list-group-item" style="border: none;">
<strong>Something</strong> : 12333434
</li>
<li class="list-group-item" style="border: none">
<strong>Something else</strong>: 2837487248723847283
</li>
<li class="list-group-item" style="border: none">
<strong>Some other stuff</strong>: 123442342423423
</li>
</ul>
</div>
Above looks like the following in browser:
However ideally I want it to look like the following (ignore the font change. I only care about the alignment):
Meaning the left side gets aligned to the right while the right side text gets aligned to the left.
How can I achieve this in bootstrap?
Using inline-block this can be achieved.By default strong is inline.
strong{
display:inline-block;
width:200px;
text-align:right;
}
Here is the fiddle link
Something like this would work, but requires set widths:
HTML:
<div class="card text-center">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="list-group-item-fixed">
<strong class="list-group-left">Something:</strong>
<span class="list-group-right">12333434</span>
</div>
</li>
<li class="list-group-item">
<div class="list-group-item-fixed">
<strong class="list-group-left">Something else:</strong>
<span class="list-group-right">2837487248723847283</span>
</div>
</li>
<li class="list-group-item">
<div class="list-group-item-fixed">
<strong class="list-group-left">Some other stuff:</strong>
<span class="list-group-right">123442342423423</span>
</div>
</li>
</ul>
</div>
CSS:
.list-group-item-fixed {
width: auto;
}
.list-group-left {
text-align: right;
width: 150px;
font-weight: bold;
display: inline-block;
}
.list-group-right {
text-align: left;
width: 200px;
display: inline-block;
}
Fiddle: https://jsfiddle.net/6nxtyv7b/
However, if you don't need a list, a simple table would suffice, and wouldn't need set widths:
HTML:
<div class="text-center">
<table class="table table-borderless table-centralised">
<tbody>
<tr>
<th>Something:</th>
<td>12333434</td>
</tr>
<tr>
<th>Something else:</th>
<td>2837487248723847283</td>
</tr>
<tr>
<th>Some other stuff:</th>
<td>123442342423423</td>
</tr>
</tbody>
</table>
</div>
CSS:
.table-centralised {
width: 0 auto;
}
.table-centralised th {
text-align: right;
width: auto;
}
.table-centralised td {
text-align: left;
width: auto;
}
Fiddle: https://jsfiddle.net/m06ek73u/
Related
Hi, I have a problem with responsive. When it's responsive mode I need 4 icons in single line. Same like web mode. Please help. I added code in image.
<ul class="nav nav-tabs first">
<li class="active" style="padding-right: 15px;">
<a href="#Mala" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/Malaicon.png" alt="" width="144" height="144">
<br>Mala Connect</a></li>
<li style="padding-right: 15px;">
<a href="#LaalsaApp" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/laalsaappicon.png" alt="" width="144" height="144">
<br>Laalsa App</a></li>
</ul>
<li style="padding-right: 15px;">
<a href="#Toran" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/toranicon.png" alt="" width="144" height="144">
<br>Toran</a></li>
</ul>
<li style="padding-right: 15px;">
<a href="#Web" data-toggle="tab">
<img style="padding-bottom: 15px;" src="laalsa.com/business/wp-content/uploads/2018/07/webicon.png" alt="" width="144" height="144">
<br>Web</a></li>
</ul>
You need to add #media css. Try this
#media screen and (max-width: 767px){
.icons-parent-elements-class{
display:inline-block;
width:25%;
float:left;
}
}
To achieve that you have to change the width of each element to the number of elements divided by 100%. for example:
#media (min-width: 750px){
.icons-parent-elements-class {
width: 25%;
display: inline-block;
float: left;
}
}
HTML:-
<div class="container">
<div class="div1">
<img src="pathnameofimage.png">
</div>
<div class="div2">
<img src="pathnameofimage.png">
</div>
<div class="div3">
<img src="pathnameofimage.png">
</div>
for mobile screens use
CSS:-
#media(max-width: 767px){
.container{
display:flex;
justify-content:center;
flex-direction:column;
}
}
#media(max-width: 767px){
.nav-tabs.first li {
width: 25%;
margin: 0;
float: left;
padding-right: 8px !important;
}
.nav-tabs.first li a img {
width: 100%;
max-width: 80px !important;
height: auto!important;
margin: 0 auto;
display: inline-block;
}
}
please try it. if don't work then please share your code. and also remove the height and width form the image tag. these are creating problem in the responsive view.
Would create a list of items and align icon at the right.
<ul class=" list">
<li *ngFor="let group of groupList">
<div class="list-item"><span>{{ group.name }} (ID {{group.code}} ) </span></div>
<div class="trash-icon">
<img src="assets/img/icon_trash.png" height="20" width="20"/>
</div>
</li>
</ul>
In CSS:
.list-item {
width: 300px;
display : inline-block;
}
.trash-icon {
float: right;
}
.trash-icon::after {
clear: both;
}
The first line is aligned correctly, however, the following lines are indented.
Here's a screenshot:
When I replace float by right align:
Use the flexbox display for that.
<ul class="list">
<li *ngFor="let group of groupList">
<div class="list-item"><span>{{ group.name }} (ID {{group.code}} ) </span></div>
<div class="trash-icon"><img src="assets/img/icon_trash.png" height="20" width="20"/></div>
</li>
</ul>
Your styles
ul.list li {
display: flex;
justify-content: center;
}
ul.list li div.list-item {
flex: 1 1 auto;
}
ul.list li div.trash-icon {
flex: 0 0 20px;
}
have you tried to replace .trash-icon float with text-align
The answer to the original question
You don't really need ::after pseudoclass when you want to clear floated items, you can just do the following:
.trash-icon {
float: right;
clear: both;
}
And here is the example:
.list-item {
width: 300px;
display : inline-block;
}
.trash-icon {
float: right;
clear: both;
}
<li>
<div class="list-item">
<span>SPAN 1</span>
</div>
<div class="trash-icon">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/rss_circle_color-256.png" height="20" width="20"/>
</div>
</li>
<li>
<div class="list-item">
<span>SPAN 2</span>
</div>
<div class="trash-icon">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/rss_circle_color-256.png" height="20" width="20"/>
</div>
</li>
<li>
<div class="list-item">
<span>SPAN 3</span>
</div>
<div class="trash-icon">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/rss_circle_color-256.png" height="20" width="20"/>
</div>
</li>
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<li class="description_os">
<ul>OS</ul>
</li>
<li class="descrption_ram">
<ul>RAM</ul>
</li>
<li class="descrption_storage">
<ul>STORAGE</ul>
</li>
</div>
</div>
I want to add price,OS,RAM right beside phone image.
Here is my image:demo-one
I have tried:
float:right;
margin:
with float property im able to move it to right side but with margin im not able to move it up and left.
Even if i manage to move it to right beside image,it breaks on smaller sized devices.
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
float:left;
}
.description_box_1{
float:left;
margin-left:25px;
}
ul{
margin:0;
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os">
OS
</li>
<li class="description_ram">
Ram
</li>
<li class="description_storage">
Storage
</li>
</ul>
</div>
</div>
You have put ul in li , which is wrong.
ul is a parent of li , so li must be in ul.
Is this the same that you want?
Hope this helps.
To keep the image and text on 1 line, here is 2 good solutions that does, even on smaller devices.
Note, since an ul need a li, I removed your inner ul's
First, the most classical one, using BFC float on the image and a margin-left on the text.
This avoid issues like white spaces with inline block and width calculation when using float, or inline-block, on both elements.
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
float: left;
}
.description_box_1 {
margin-left: 176px; /* 160px width + 14px padding + 1px + 1px border */
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="http://lorempixel.com/160/250/technics/7/" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os">
OS
</li>
<li class="descrption_ram">
RAM
</li>
<li class="descrption_storage">
STORAGE
</li>
</ul>
</div>
</div>
Second, a more modern solution, using Flexbox
.article {
display: flex;
}
.item_one_image {
border: 1px solid #ccc;
padding: 4px 0px 10px 14px;
}
.description_box_1 {
flex: 1; /* take all the remaining space */
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="http://lorempixel.com/160/250/technics/7/" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os">
OS
</li>
<li class="descrption_ram">
RAM
</li>
<li class="descrption_storage">
STORAGE
</li>
</ul>
</div>
</div>
List item element of html tags should be covered by your unordered list element, that means, "ul" tag should have children elements as "li"
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
</ul>
<li class="description_os">
OS
</li>
<li class="descrption_ram">
RAM
</li>
<li class="descrption_storage">
STORAGE
</li>
</div>
</div>
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
float:left;
}
.description_box_1{
float:left;
margin-left: 10px;
}
https://fiddle.jshell.net/hofh146n/
Just add .item_one_image, .description_box_1 { float: left; } code in to your CSS. And change the ul,li structure. Refer code from following HTML section.
.item_one_image {
border: 1px solid #ccc;
width: 160px;
padding: 4px 0px 10px 14px;
height: 250px;
}
.item_one_image, .description_box_1 {
float: left;
}
<div class="article">
<div id="title_1">
</div>
<div class="item_one_image">
<img src="#" alt="demo image" />
</div>
<div class="description_box_1">
<div class="price_1">
<span>PRICE:</span>
</div>
<ul>
<li class="description_os"> OS </li>
<li class="descrption_ram"> RAM </li>
<li class="descrption_storage"> STORAGE </li>
</ul>
</div>
</div>
I've got a weird rendering issue in IE concerning an inline unordered list. What I'm trying to do is make a visualizer for the lifespan of a project, but whenever I try to add in any text in my <p> object designed to hold a time period, it shifts the whole <li> element down, but only in Internet Explorer.
Please, take a gander at this issue: https://jsfiddle.net/xny1zv3j/
I'm okay with the name and position (ex: 'John' and 'Project Lead' being pulled down - that's not an issue for me. But in IE, and IE only, it seems as if the entire list element is pulled down. When the <p> element is empty, it's simply ignored, and is fine in all browsers, but when it has content, IE freaks out.
You should be able to simply add vertical-align: top to your .li class.
Is this what you are shooting for? https://jsfiddle.net/xny1zv3j/3/
HTML
<div class="container body-content">
<div class="container" id="main-container">
<ul class="timeline">
<li class="li" >
<div class="timestamp">
<div class="author">John</div>
<div class="date">Project Lead</div>
</div>
<div class="status">
<div class="time-period">
<p></p>
</div>
<h4>Created Project</h4>
</div>
</li>
<li class="li" >
<div class="timestamp">
<div class="author">Jenny</div>
<div class="date">Programmer</div>
</div>
<div class="status">
<div class="time-period">
<p></p>
</div>
<h4>Built Project</h4>
</div>
</li>
<li class="li" >
<div class="timestamp">
<div class="author">Jeremy</div>
<div class="date">Marketing</div>
</div>
<div class="status">
<div class="time-period">
<p>2 yrs</p>
</div>
<h4>Advertised Project</h4>
</div>
</li>
<li class="li" >
<div class="timestamp">
<div class="author">Jack</div>
<div class="date">Sales</div>
</div>
<div class="status">
<div class="time-period">
<p></p>
</div>
<h4>Sold Project</h4>
</div>
</li>
<li class="li" >
<div class="timestamp">
<div class="author">Jebeddiah</div>
<div class="date">IT</div>
</div>
<div class="status">
<div class="time-period">
<p></p>
</div>
<h4>Defended Project</h4>
</div>
</li>
</ul>
</div>
</div>
CSS
.timeline {
text-align: left;
list-style-type: none;
display: inline-block;
margin-bottom:-23px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
}
.li {
width: 150px;
display: inline-block;
}
.timestamp {
margin-bottom: 20px;
padding: 0px;
font-weight: 100;
display: block;
white-space: nowrap;
overflow: hidden;
}
.status {
padding-top: 10px;
position: relative;
transition: all 200ms ease-in;
white-space: normal;
}
.status h4 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
padding-bottom: 3px;
}
.time-period {
display: inline;
text-align: center; }
.time-period p {
/* margin: -30px 0px 20px;*/
}
.time-period p:empty {
display:inline-block;
}
I am trying to make my list items all the same width. I've tried setting the widths in the css and nothing changes. Can anyone figure this out?
Here is an image to show what I am talking about:
HTML:
<body>
<div class="content-wrapper" id="container">
<header>logo
<nav>navigation</nav>
</header>
<div class="clear-fix"></div>
<div id="body">
<section class="main-content">
<section class="leftPane">
<h2>Categories</h2>
</section>
<section class="rightPane">
<div class="checkout">
<h1>Checkout</h1>
<ul class="steps">
<li><a href="http://localhost:59213/Cart">
<div id="step0" class="arrow_box_grey">
Shopping Cart</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Student">
<div id="step1" class="arrow_box_grey">
Student</div>
</a>
</li>
<li><a href="http://localhost:59213/Cart/Delivery">
<div id="step2" class="arrow_box_grey">
Delivery</div>
</a>
</li>
<li>
<div id="step3" class="arrow_box_green">Payment</div>
</li>
<li>
<div id="step4" class="arrow_box_blue">Finish</div>
</li>
</ul>
</div>
</section>
<div class="clear-fix"></div>
</section>
</div>
</div>
And here if my fiddle with the code: http://jsfiddle.net/M74Em/
You need to change this style:
.main-content .checkout ul.steps li div {
display: inline;
width: 1000px;
}
You can't set widths for inline elements so try this:
.main-content .checkout ul.steps li div {
display: inline-block;
width: 100px;
}
Example
From twBootstrap, applied to <ul>'s (demo):
.ul-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.ul-justified > li {
display: table-cell;
float: none;
width: 1%;
}
and slap .ul-justified to any ul-list you want aligned, and you get equal width <li>'s automatically fit parent ul's width.