I have a image on my personal website where when you hover over it it displays links to my social media pages. However these links go horizontal and don't align in the box. How can I make it so it is vertical and fits in the image.
link to image
<div class="container">
<h1>Socials</h1>
<div class="row">
<div class="col-md-12 profile-pic text-center">
<div class="img-box">
<img src="img/myself5.jpg" class="img-responsive">
<ul>
<li><i class="fa fa-instagram"></i>#landn.dev</li>
<li><i class="fa fa-twitter"></i>#LandenMick</li>
<li><i class="fa fa-github"></i>#landenthemick</li>
</ul>
</div>
<h2>Landen Mick</h2>
<p>Programmer</p>
</div>
</div>
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 want to show 3 tiles in a one row. 3 tiles should come in one row in the mobile view also.now im able to see only 3 tiles in one row but in mobile its showing two tiles in a row. how to make 3 tiles should cover complete row and same 3 tiles i need to show mobile also .im using adminlte theme for the design
code pen
https://codepen.io/krishnakernel/pen/VQQyaV
<div class="row">
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3>64 ℃<sup style="font-size: 20px"></sup></h3>
<p><span>Oil Temperature</span></p>
</div>
<div class="icon">
<i class="fa fa-thermometer-3"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-yellow">
<div class="inner">
<h3>88<span style="font-size:30px">Amp</span></h3>
<p>R Current </p>
</div>
<div class="icon">
<i class="fa fa-flash"></i>
</div>
<a href="" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-red">
<div class="inner">
<h3>233 <span style="font-size:20px">⚡</span> </h3>
<p>R Voltage in kva</p>
</div>
<div class="icon">
<i class="fa fa-bolt"></i>
</div>
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</div>
</div>
</div>
You didnt close the div properly
Change <div class="col-lg-3 col-xs-4">
Try changing the classes to col-xs-4 for all the elements you want to have displayed in a row.
In bootstrap, the grid summ need to be equal 12. Then if you want the xs to be a row, you need to change to col-xs-4 because you only have 3 div.
Check more info here: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
If you want your layout to always be three columns use the xs breakpoint. The different breakpoints are designed to change the layout based on screen size.
I have included a sidebar in one column and 3 thumbnails in another 3 columns in a row. The thumbnail image is fitting the entire columns at first but when I resize the thumbnail images are getting smaller keeping the column in full width (as for usual bootstrap responsive works). I need to stretch my images as that of the column they are filled in.
Here's my HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid side-navigation-bar">
<div class="row">
<!--==========================================-->
<!--Side navigation bar-->
<!--==========================================-->
<div class="col-md-3 col-md-3-thumbnail">
<div class="nav-side-menu" >
<div class="brand"><i class="fa fa-heartbeat"> myVitals.com</i></div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list" >
<ul id="menu-content" class="menu-content collapse out" >
<li>
<a href="#">
<i class="fa fa-home fa-lg fa-fw"></i> Home
</a>
</li>
<li>
<a href="#">
<i class="fa fa-book fa-lg fa-fw"></i> My Appointments
</a>
</li>
<li>
<a href="#">
<i class="fa fa-s15 fa-lg fa-fw"></i> Facilities
</a>
</li>
<li>
<i class="fa fa-cogs fa-lg fa-fw"></i> Services
</li>
<li>
<i class="fa fa-stethoscope fa-lg fa-fw"></i> Doctors
</li>
<li>
<a href="#">
<i class="fa fa-medkit fa-lg fa-fw"></i> Medications
</a>
</li>
<li>
<a href="#">
<i class="fa fa-medkit fa-lg fa-fw"></i> Medications
</a>
</li>
</ul>
</div>
</div>
</div>
<!--==========================================-->
<!--End of Side navigation bar-->
<!--==========================================-->
<!--==========================================-->
<!--Cards-->
<!--==========================================-->
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p>Read More</p>
</div>
</div>
</div>
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p>Read More</p>
</div>
</div>
</div>
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p>Read More</p>
</div>
</div>
</div>
</div>
</div>
I even tried the width:100% for the thumbnail image as
.thumbnail > img{width:100%; display:block;}
The problem is, the img is not taking the full-width as that of its column
Can anyone please help me???
Used .img-fluid for responsive image in Bootstrap.4. it have following css:
.img-fluid {
max-width: 100%;
height: auto;
}
https://getbootstrap.com/docs/4.0/content/images/
You can just set the width to 100% and the height to auto, this will expand it to full width.
CSS:
.thumbnail > figure > img {
width: 100%;
height: auto;
}
JSFiddle Demo
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.
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