i have this piece of code which not in order.i am trying to make it appear in the middle of the page but i want to to stick to one line in verticle.
current outcome is as below.How do i adjust contacts inline?
<div class="col-md-12">
<div>
<ul class="list-icons" style="text-align: center;margin-left:0;">
<li><i class="fa fa-phone-square pr-10 text-default" style="font-size:15px"></i> +65 1234567</li>
<li><i class="fa fa-fax pr-10 text-default" style="font-size:15px"></i> +65 12345678</li>
<li "><i class="fa fa-envelope pr-10 text-default" style="font-size:15px"></i>contactus#testmail.com</li>
</ul>
</div>
<br>
</div>
add text-align:center to the div containing your ul, then change the ul text-align:center to text-align: left and add display: inline-block
<script src="https://use.fontawesome.com/89d51f385b.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12">
<div style="text-align:center;">
<ul class="list-icons" style="text-align: left;margin-left:0; display:inline-block; list-style-type: none;">
<li><i class="fa fa-phone-square pr-10 text-default" style="font-size:15px"></i> +65 1234567</li>
<li><i class="fa fa-fax pr-10 text-default" style="font-size:15px"></i> +65 12345678</li>
<li><i class="fa fa-envelope pr-10 text-default " style="font-size:15px"></i>contactus#testmail.com</li>
</ul>
</div>
<br>
</div>
Related
Good morning,
I use Bootstrap 4.5 and try to make a nice footer for my university site.
I use this :
<div class="container-fluid d-flex justify-content-center">
In order to have my footer centered and not the blocks being far away from each other.
But, on bigger screen (i emulated it with Firefox), the text is on two lines, because of the centered option and i would like to be on one line because it had space :
Here is the full code if it can be helpful :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-fluid d-flex justify-content-center">
<div class="row">
<div class="col-lg-4 col-md-6 col-12 pb-5">
<h4 class="text-center">some text</h4>
<div class="d-flex justify-content-between align-items-center">
<a href="#" data-toggle="collapse" data-target="#footer_ups" aria-expanded="false" aria-controls="footer_ups">
<span><i class="fa fa-chevron-right pr-2"></i>some text some text sometext sometextsome text</span>
</a>
<span class="badge badge-primary badge-pill">7 <i class="fa fa-caret-down"></i></span>
</div>
<div id="footer_ups" class="collapse pl-3" aria-labelledby="some text">
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
</ul>
</div>
<div class="d-flex justify-content-between align-items-center">
<a href="#" data-toggle="collapse" data-target="#footer_ipp" aria-expanded="false" aria-controls="footer_ipp">
<span><i class="fa fa-chevron-right pr-2"></i>some text sometextsome text</span>
</a>
<span class="badge badge-primary badge-pill">4 <i class="footer_ipp_glyph fa fa-caret-down"></i></span>
</div>
<div id="footer_ipp" class="collapse pl-3" aria-labelledby="some text">
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
</ul>
</div>
<br />
<i class="fa fa-chevron-right pr-2"></i>some textsome textsome textsome texttextsome textsome text
</div>
<div class="col-lg-4 col-md-6 col-12 pb-4">
<h4 class="text-center">Aide et Informations légales</h4>
<ul class="list-unstyled">
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
<li><i class="fa fa-angle-right pr-2"></i> some text</li>
</ul>
</div>
<div class="col-lg-4 col-md-12 text-center">
<h4 class="text-center">Suivez-nous</h4>
<i class="fa fa-facebook-square fa-3x mr-3"></i>
<i class="fa fa-twitter-square fa-3x mr-3"></i>
<i class="fa fa-linkedin-square fa-3x mr-3"></i>
<i class="fa fa-instagram fa-3x"></i>
</div>
</div>
</div>
Is this possible ?
Thank you !!
It is not possible because you used bootstrap pre-define class col- to adjust width.
If you want to convert two lines text into one class, your text will cut
It is possible only to not to use Bootstrap class, you use custom width to all columns
I want to add upto 6 icons in a div bar in Bootstrap as shown in the below wireframe, I have already made it in an icon bar class but my supervisor has prohibited me to do so, so I cant use any of the navigation bars or icon bars. What will be the best way to do it? Also How to keep it seperate from the below div?
The wireframe of what I want
Following is my html code:
<nav class="navbar ">
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-home"> </i> </a>
<i class="fa fa-search"> </i>
<i class="fa fa-globe"> </i>
<i class="fa fa-envelope"> </i>
<i class="fa fa-trash"> </i>
</div>
</nav>
<div class="container-fluid">
<div class="col-sm-12" style="background-color: green;"></div> <br> <br>
Simple copy and paste
<style>
.icons_div {
margin: 0px auto;
width: max-content;
}
.icon{
margin : 0px auto;
width: 15px;
display: initial;
}
.fa {
padding: 0px 10px;
}
</style>
<div class="icons_div">
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
</div>
I would like to create a marker for a subdropdown menu.
I created the following;
I have inserted an icon of font-awesome to show that there is a next level submenu. This icon I want to align to the right, what is the best way to go? Adding a class in CSS or just use align="right"?
Here is the code:
<div class="menuSection">
<div class="menuItem" rendercondition="[Relatics.Portallink Sequence='410' Get='Visibility' ExpectedResult='Visible']">
<div class="dropdown">
<button class="dropbtn"><i class="fa fa-random fa-3x" aria-hidden="true"></i><br> [Relatics.Portallink Sequence='400' Get='Name']</button>
<div class="dropdown-content">
<ul>
<li><i class="fa fa-bolt fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='410' Get='Name'] <i class="fa fa-play-circle fa-1x">
<ul>
<li><i class="fa fa-level-down fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='411' Get='Name'] </li>
<li><i class="fa fa-table fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='412' Get='Name'] </li>
<li><i class="fa fa-list-ol fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='413' Get='Name'] </li>
</ul>
</li>
<li><i class="fa fa-chain-broken fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='420' Get='Name'] <i class="fa fa-play-circle fa-1x">
<ul>
<li><i class="fa fa-level-down fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='421' Get='Name'] </li>
<li><i class="fa fa-table fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='422' Get='Name'] </li>
</ul>
</li>
<li><i class="fa fa-exchange fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='430' Get='Name'] <i class="fa fa-play-circle fa-1x">
<ul>
<li><i class="fa fa-level-down fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='431' Get='Name'] </li>
<li><i class="fa fa-table fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='432' Get='Name'] </li>
</ul>
</li>
<li><i class="fa fa-puzzle-piece fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='440' Get='Name'] <i class="fa fa-play-circle fa-1x">
<ul>
<li><i class="fa fa-level-down fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='441' Get='Name'] </li>
<li><i class="fa fa-table fa-2x" aria-hidden="true"></i>  [Relatics.Portallink Sequence='442' Get='Name'] </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
Adding a class and using float: right; in the css seems like the best way to me.
.listitem {
background: yellow;
width: 200px;
}
.icon {
float: right;
}
<div class="listitem">List item<i class="icon">Icon</i></div>
How can I align an image below text, without the image going to the right of the text?
I'm using flexbox to display the icons/links in columns. But below that, I want the image to be centered below the paragraph of text.
I have tried using clear but no change.
a:link {
color: black;
background-color: transparent;
text-decoration: none;
font-size: 75%;
}
a:visited {
color: black;
background-color: transparent;
text-decoration: none;
font-size: 75%;
}
a:hover {
color: #9700bd;
background-color: transparent;
text-decoration: underline;
font-size: 75%;
}
a:active {
color: #9700bd;
background-color: transparent;
text-decoration: none;
font-size: 75%;
}
footer ul {
list-style: none;
text-align: center;
}
footer div div {
margin: 0 auto;
display: inline-block;
}
footer > div {
/*margin-left: 25%;*/
display: flex;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<footer>
<div>
<div>
<ul>
<li><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</li>
<li><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</li>
<li><i class="fa fa-vine" aria-hidden="true"></i> Vine</li>
</ul>
</div>
<div>
<ul>
<li><i class="fa fa-youtube-play" aria-hidden="true"></i> YouTube</li>
<li><i class="fa fa-twitch" aria-hidden="true"></i> Twitch</li>
<li><i class="fa fa-soundcloud" aria-hidden="true"></i> SoundCloud</li>
<li><i class="fa fa-reddit-alien" aria-hidden="true"></i> Reddit</li>
</ul>
</div>
<div>
<ul>
<li><i class="fa fa-github" aria-hidden="true"></i> GitHub</li>
<li><i class="fa fa-stack-overflow" aria-hidden="true"></i> Stack Overflow</li>
<li><i class="fa fa-jsfiddle" aria-hidden="true"></i> JSFiddle</li>
</ul>
</div>
</div>
<hr>
<div class="footer">
<p class="footer" style="clear: right;">Oh, hello there. My name is Java. No, not the programming language! Well, this is awkward. Not much else to be said... uhm... enjoy your stay, I guess!</p>
<a href="http://itzjavacraft.tk">
<img src="/images/logo.png" alt="ItzJavaCraft" class="footer" />
</a>
</div>
</footer>
Here's a JSFiddle
The quickest solution I can think of is to apply Flexbox only to the <div> that contains your icons/links. That way, the <div> below will remain "un-flexed" and will stack as you expect:
footer {
text-align: center;
}
#footer_links {
display: flex;
}
#footer_links div {
margin: 0 auto;
display: inline-block;
}
#footer_links ul {
list-style: none;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<footer>
<div id="footer_links">
<div>
<ul>
<li><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</li>
<li><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</li>
<li><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</li>
<li><i class="fa fa-vine" aria-hidden="true"></i> Vine</li>
</ul>
</div>
<div>
<ul>
<li><i class="fa fa-youtube-play" aria-hidden="true"></i> YouTube</li>
<li><i class="fa fa-twitch" aria-hidden="true"></i> Twitch</li>
<li><i class="fa fa-soundcloud" aria-hidden="true"></i> SoundCloud</li>
<li><i class="fa fa-reddit-alien" aria-hidden="true"></i> Reddit</li>
</ul>
</div>
<div>
<ul>
<li><i class="fa fa-github" aria-hidden="true"></i> GitHub</li>
<li><i class="fa fa-stack-overflow" aria-hidden="true"></i> Stack Overflow</li>
<li><i class="fa fa-jsfiddle" aria-hidden="true"></i> JSFiddle</li>
</ul>
</div>
</div>
<hr>
<div>
<p>Oh, hello there. My name is Java. No, not the programming language! Well, this is awkward. Not much else to be said... uhm... enjoy your stay, I guess!</p>
<a href="http://itzjavacraft.tk">
<img src="/images/logo.png" alt="ItzJavaCraft" />
</a>
</div>
</footer>
I am trying to have a thumbnail grid. Each thumbnail can have either one of two different height, but I want the whole row to have the same height
As can be seen, because the last two thumbnails are higher, the rest get's pushed down.
When I inspect it with Google Devtools, no padding or margin has been added, they're just being forced down somehow
CSS:
.video {
display: inline-block;
width: 220px;
height: 250px;
margin: 0 0 15px 15px;
h4 {
margin-top: 5px;
}
.thumbnail {
padding: 0px;
border: none;
background: none;
// box-shadow: 5px 5px 15px -6px;
.caption {
word-break: break-all;
}
}
}
HTML:
<div class="row">
<div class="col-xs-12">
<div class="videoList">
<div class="video">
<div class="item">
<div class="thumbnail">
<img src="https://i.ytimg.com/s_vi/YXQdrjJiQjY/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLAx8dW9kP4W6XdVeCR73QmLOEOdNw" alt="thumbnail">
<div class="caption">
<h4><span class="title">My Slideshow</span></h4>
<ul class="list-inline">
<li>1 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 0</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
<div class="video">
<div class="item">
<div class="thumbnail">
<img src="https://i.ytimg.com/s_vi/Ii7FfPgDU6A/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLAU-ezif1lm8rXcVNRePjnfVhGvTA" alt="thumbnail">
<div class="caption">
<h4><span class="title">My Slideshow</span></h4>
<ul class="list-inline">
<li>1 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 0</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
<div class="video">
<div class="item">
<div class="thumbnail">
<img src="https://i.ytimg.com/s_vi/GB9syW4zI2o/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLDbBXF49SYPGVhCKJ6QqYcwP3xpEA" alt="thumbnail">
<div class="caption">
<h4><span class="title">My Slideshow</span></h4>
<ul class="list-inline">
<li>0 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 0</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
<div class="video">
<div class="item">
<div class="thumbnail">
<img src="https://i.ytimg.com/s_vi/b7dK2DEMkyI/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLC6UBWeTho-vmmSozu-CG1Zno88vQ" alt="thumbnail">
<div class="caption">
<h4><span class="title">My Slideshow</span></h4>
<ul class="list-inline">
<li>1 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 0</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
<div class="video">
<div class="item">
<div class="thumbnail">
*<img src="https://i.ytimg.com/s_vi/9nizjdeEecE/hqdefault.jpg?sqp=CNjOtKgF&rs=AOn4CLC5VfvmjPALw-K5COknauUE2fTORg" alt="thumbnail">
<div class="caption">
<h4><span class="title">John Lennon - Imagine (rock instrumenta...</span></h4>
<ul class="list-inline">
<li>38 views</li>
<li><i class="fa fa-thumbs-o-up"></i> 0</li>
<li><i class="fa fa-thumbs-o-down"></i> 3</li>
<li><i class="fa fa-comment-o"></i> 0</li>
</ul>
</div>
</div>
</div>
</div>
Any help is much appreciated
It's because other divs have longer titles than others and your div are aligning them bottom by default.To fix this problem you'll need to add vertical-align:top; to your class .item, if not I think the class is .thumbnail
.item {
vertical-align:top;
}
add vertical align to video class:
vertical-align:top