I got the left side to line up but can't get the right side to work. I tried pull-right, float:right, text-align:right, but none of them work. Here is my code. Appreciate any help]1
<footer class="footer clearfix">
<div class="footer-grid">
<div class="footer-L col-md-6">
<a class="footer-text" href="hysys.html">
<span>Previous</span>
<i class="fa fa-arrow-left"></i>
<h2>HYSYS<h2>
</a>
</div>
<div class="footer-R col-md-6 pull-right">
<a class="footer-text" href="hysys.html">
<span>Next</span>
<i class="fa fa-arrow-right"></i>
<h2>Aspen One</h2>
</a>
</div>
</div>
</footer>
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 using Bootstrap CDN on a website where I am trying to align the icons to the left side with logo and centre the text on a top bar. Is there a simple method to get it done?
Top bar picture
<div class="topbar clearfix">
<div class="container">
<div class="row-fluid">
<div class="col-md-4 text-left">
<div class="social">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-pinterest"></i>
</div><!-- end social -->
</div><!-- end left -->
<div class="col-md-8 text-right">
<p>
Интернет-магазин производителя фитоламп и промышленного освещения
<strong><i class="fa fa-phone"></i></strong> +7(499) 100-00-00
</p>
</div><!-- end left -->
</div><!-- end row -->
</div><!-- end container -->
</div>
try use
class="container-fluid"
and adjust the col-md-4 .. to the value you really need
I'm creating an account page (header) for the first time, and I notice that some of the icons will not align perfectly with the text. I know how simple and easy this is for advanced developers, but I'm just starting off and really need some advice.
I have tried using padding and margin as a style element but didn't work.
<header>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-8">
<div class="row">
<div class="col-sm-3">
<img src="paylocity_logo.png" alt="logo" style="width:100%"S/></a>
</div>
<div class="col-sm-9 hidden-sm hidden-xs" id="project-details">
<a class="home-link" href="" title="Edit"> <i class="material-icons"> home </i> </a>
<div class="project">
User Profile
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4 text-right" id="account">
<i class="material-icons">account_circle</i> <span>Tom Markart </span>
<div id="account-options">
<ul>
<li>
<span> <i class="material-icons">account_circle</i></span>View Profile
</li>
<li>
<span class="fa fa-cog"></span>Settings
</li>
<li>
<span class="fa fa-bug"></span>Report a Bug
</li>
<li>
<span class="fa fa-power-off"></span>Log Out
</li>
</ul>
</div>
</div>
</div>
</header>
I want to make them straight.
In your case, you can add the following rule:
.material-icons {
vertical-align: middle;
}
https://codepen.io/anon/pen/EBBbpd
Using flex:
Wrap text in <span> and a wrapper class to <a>.
...
<li>
<a class='wrapper' href="javascript:void(0);">
<span class="fa fa-cog"></span>
<span>Settings</span>
</a>
</li>
...
.wrapper {
display: flex;
align-items: center
}
Hey im doing a page with semantic ui Id like to make a list with middle aligned buttons. But they will always float after the other content
<div class="ui divided list">
<div class="item">
<div class="ui tiny circular image">
<img src="https://www.cutecatgifs.com/wp-content/uploads/2016/12/tail.gif">
</div>
<div class="middle aligned content">
<div class="header">
Name
</div>
<a class="meta" href="mailto:#">
<i class="mail icon"></i> mail#mail.de
</a>
<div class="description">
<i class="building outline icon"></i> 2-125 <br>
<i class="fax icon"></i> 123-123-123
</div>
</div>
<div class="right floated"> <!-- this should be middle aligned -->
<div class="ui middle aligned basic icon buttons">
<a class="ui button" href="#"><i class="unhide icon"></i></a>
<a class="ui button" href="#"><i class="write icon"></i></a>
<a class="ui button" href="#"><i class="trash outline right icon"></i></a>
</div>
</div>
</div>
</div>
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