I'm having a hard time working with UL LI items in a bootstrap set up. I'm trying to align them so that there are next to each other (horizontal) rather than being aligned vertically. Here's my bode:
<div class="container-fluid" style="margin-bottom:45px;">
<div class="row text-center">
<div class="col-lg-12">
<h4 class="text-center">FOLLOW US</h4>
<hr style="width:60%">
</div>
</div>
<div class="row ">
<div class="col-lg-12 d-flex justify-content-around" id="socialMedia">
<ul style="list-style:none;">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-yelp"></i></li>
</ul>
</div>
</div>
</div>
but i have not been able to get it to align horizontally. I tried to apply CSS to #socialMedia, like Float:left, display:inline but it's not working.
Right now they are positioned in dead center, and that's how I want them to stay.
Does anyone have any idea?
Use the d-inline class...
<ul class="list-unstyled">
<li class="d-inline"><i class="fab fa-facebook-f"></i></li>
<li class="d-inline"><i class="fab fa-instagram"></i></li>
<li class="d-inline"><i class="fab fa-yelp"></i></li>
</ul>
https://www.codeply.com/go/DaDD3njGFz
You said you applied the float to #socialMedia but that's the ul. You have to apply float: left on the lis. Add the float: left to #socialMedia li.
(If that still doesn't work, you have to make sure you have enough specificity to override Bootstrap. Last resort, add !important).
Related
I have developed a site on angular. All things are working fine. Now I want to adjust the footer.
Actual Footer
Expected Footer
Code
<footer>
<div class="row">
<div class="col-12">
<img src="../../assets/img/logo.svg" alt="" class="img-fluid" />
</div>
<div class="col-md-3 col-12">
<p>
<b>Manufactured by:</b>
</p>
</div>
<div class="col-md-2 col-6 mt-lg-0 mt-3">
<ul class="nav-menu">
<li>
<a [routerLink]="['/']">Home</a>
</li>
<li>
About us
</li>
<li>
Faqs
</li>
<li>
<a [routerLink]="['/latest-recipes']">recipes</a>
</li>
<li>
<a [routerLink]="['/stores']">Stores</a>
</li>
<!-- <li>
<a [routerLink]="['/where-to-buy']">where to buy</a>
</li> -->
</ul>
</div>
<div class="col-md-2 col-6 mt-lg-0 mt-3">
<ul class="px-0">
<li>Privacy & Policy</li>
<li>Terms & Condition</li>
</ul>
</div>
<div class="col-md-3 col-12">
<h1>Karachi Office</h1>
<p></p>
<h1>Lahore Office</h1>
<p></p>
<div class="social-icon d-flex align-items-center">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
</div>
<div class="col-md-2 col-12">
<img src="../../assets/img/ebs.png" class="img-fluif" />
</div>
</div>
</footer>
How can I align the footer? Any help would be highly appreciated.
You've made the image col-12 which will make the image spread across the full container. Remember that in bootstrap each container is split into 12, so saying that the image covers col-12 will cover all of them. From the looks of it you want to try around col-2.
Alternatively you could achieve the same without Bootstrap. Put the logo/manufactured by links in one div and float them left. Place the rest of the content in another div and float them right.
Add and Remover mt-3(margin-top) from the div.
I'm trying to get rid of a bullet point in a row, but for some reason the first one is gone but the other is not.
I just want the email and phone to be side by side with no list.
.get_in {
list-style: none;
}
<div class="row">
<div class="col-md-6">
<ul class="get_in">
<li><i class="fa fa-envelope-o"></i>
<p>111111#hotmail.com</p>
</li>
</div>
<div class="col-md-6">
<li><i class="fa fa-phone"></i>
<p>(+41) 11111111</p>
</li>
</ul>
</div>
</div>
Just some messed up HTML. Close your first ul, create another for the second list and give the same class name.
.get_in {
list-style: none;
}
<div class="row">
<div class="col-md-6">
<ul class="get_in">
<li><i class="fa fa-envelope-o"></i>
<p>111111#hotmail.com</p>
</li>
</ul>
</div>
<div class="col-md-6">
<ul class="get_in">
<li><i class="fa fa-phone"></i>
<p>(+41) 11111111</p>
</li>
</ul>
</div>
</div>
Your HTML is invalid, and your browser is attempting to fill in the holes. If you inspect the actual rendered HTML in your browser's developer tools, you'll most likely see:
<div class="row">
<div class="col-md-6">
<ul class="get_in">
<li><i class="fa fa-envelope-o"></i><p>111111#hotmail.com</p></li>
</ul>
</div>
<div class="col-md-6">
<li><i class="fa fa-phone"></i><p>(+41) 11111111</p></li>
</div>
</div>
Note that in the second column the li is not wrapped with a ul, which is why your CSS rule does not apply.
I just want the email and phone to be side by side with no list
If this is the case, then don't use a list:
<div class="row">
<div class="col-md-6">
<i class="fa fa-envelope-o"></i> 111111#hotmail.com
</div>
<div class="col-md-6">
<i class="fa fa-phone"></i> (+41) 11111111
</div>
</div>
First, let's put your ul tag which opens, under the first div tag.
Second, let's put your ul tag which closes, between the last div and before the last div tags.
<div class="row">
<ul class="get_in">
<div class="col-md-6">
<li><i class="fa fa-envelope-o"></i><p>111111#hotmail.com</p></li>
</div>
<div class="col-md-6">
<li><i class="fa fa-phone"></i><p>(+41) 11111111</p></li>
</div>
</ul>
</div>
You can't open a ul element in one div and then close it in another div.
This is your HTML:
<div class="row">
<div class="col-md-6">
<ul class="get_in">
<li><i class="fa fa-envelope-o"></i><p>111111#hotmail.com</p></li>
</div>
<div class="col-md-6">
<li><i class="fa fa-phone"></i><p>(+41) 11111111</p></li>
</ul>
</div>
</div>
Change your HTML to:
<div class="row">
<div class="col-md-6">
<ul class="get_in">
<li><i class="fa fa-envelope-o"></i><p>111111#hotmail.com</p></li> </ul>
</div>
<div class="col-md-6">
<ul>
<li><i class="fa fa-phone"></i><p>(+41) 11111111</p></li>
</ul>
</div>
</div>
I hope that this has helped you.
How can i remove this space between body and right side of page?
See full code here: https://jsfiddle.net/4tqdejyx/
<div class="social">
<h4 class="social-text">#Social</h4>
<ul class="lista">
<li><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li><i class="fa fa-youtube-play" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
</ul>
</div>
<div class="Contact-us">
<div class="contact-button "> <p class="dugme"><button class="cbtn">Contact us</button></p></div>
</div>
<div class="footer">
<img src="" class="logo" alt="logo"/>
<h4 class="bk-text2">Buddy/Kitty</h4>
<p>©All rights reserved!</p>
</div>
Set the container's or body's width property to 100% to cover the complete width of the browser window. I could be more specific if you shower your code or made a JSFiddle.
The left class has a left-margin of 2%
The right class has a right-margin of 8%
I think that's where the problem lies and not with the body. Change your CSS for right to the following and it should fix the problem you're seeing.
.right {
margin-right: 2%;
margin-left: auto;
float: right;
}
Also...
It looked like you were having some problems with lining up your <div class="social"> correctly, so I made some changes to those tags. I also aligned your login button to hug to the right side to be symmetrical with the play button on the left.
https://jsfiddle.net/dotspencer/4tqdejyx/5/
I've tried my best but unfortunately I am not able to position the Text Center 1 and 2 elements in the middle of the navbar. Hope you can help me out. Thanks.
<div class="navbar navbar-default navbar-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>Left</p>
</div>
<div class="navbar-text ???">
<i>Text Center 1</i>
<i>Text Center 2</i>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
</div>
</div>
</div>
Bootstrap has a predefined centered text class text-center that you can add to any element/div.
example: <div class="navbar-text text-center">
View all bootstrap alignment classes here: http://getbootstrap.com/css/#type-alignment
Just give the div that you want to center the text-align:CENTER; property.
Sometimes it is just easier to use plain CSS instead of Bootstrap.
div.center{
text-align:CENTER;
}
<div class="navbar navbar-default navbar-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<p>Left</p>
</div>
<div class="navbar-text center">
<i>Text Center 1</i>
<i>Text Center 2</i>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
</div>
</div>
</div>
Class text-center helps you to center Text Center links only when screen-size is less then 768px (but in this case social links fall down!), if screen-size is more 768px, bootstrap's class navbar-text has property float: left and your links will be left side of navbar. To prevent its behavior, you need to apply float: none and display: inline-block properties for middle navbar:
<div class="navbar navbar-default navbar-bottom" role="navigation">
<div class="container text-center">
<div class="navbar-text pull-left">
<p>Left</p>
</div>
<div class="navbar-text myClass">
<i>Text Center 1</i>
<i>Text Center 2</i>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
</div>
</div>
</div>
.myClass {
float: none;
display: inline-block;
}
class text-center in this case is used for div.container
JSFiddle-example
i made a list of blocks using bootstrap 3.0. but im having problems with the desired outcome. Please help, thanks.
Current outcome
Desired outcome
Custom style from current outcome
.list_comments{
list-style: none;
margin-left:-40px;
}
.list-comment-block{
width:33.33%;
float:left;
padding:5px;
margin-bottom:-15px;
}
Markup
<ul class="list-comments">
<li class="list-comment-block">
<div class="thumbnail">
<div class="caption">
<i class="fa fa-comment fa-2x pull-right text-success"></i><h4>A student said</h4>
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
<p>Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.</p>
</div>
</div>
</li>
<li class="list-comment-block">
<div class="thumbnail">
<div class="caption">
<i class="fa fa-comment fa-2x pull-right text-success"></i><h4>A student said</h4>
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
<p>Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.</p>
</div>
</div>
</li>
<li class="list-comment-block">
<div class="thumbnail">
<div class="caption">
<i class="fa fa-comment fa-2x pull-right text-success"></i><h4>A student said</h4>
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
<p>Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.</p>
</div>
</div>
</li>
<li class="list-comment-block">
<div class="thumbnail">
<div class="caption">
<i class="fa fa-comment fa-2x pull-right text-success"></i><h4>A student said</h4>
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
<p>Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.</p>
</div>
</div>
</li>
</ul>
I have tried using position:relative, inherit too. I appreciate any answers
I think it would be easier to get the layout you want using DIV container elements instead of a UL. Then you can use CSS3 column-width to evenly align the thumbnails in a "masonry" style layout..
.list-comments {
-moz-column-width: 25em;
-webkit-column-width: 25em;
-moz-column-gap: .5em;
-webkit-column-gap: .5em;
}
.thumbnail {
display: inline-block;
margin: .5em;
padding: 0;
width:98%;
}
Demo: http://bootply.com/129218