I've been going in circles for 1 day on a simple footer which stays at the bottom of the page, unfixed.
I've managed to have it at the bottom of a full screen page. However, when I decrease the width of my browser's window to simulate a "responsive display", the footer stays at the same place when I scroll down the page and thus does not flush down.
Here is my html :
<html>
<body>
<div class="container">
<div class="row text-center">
<p> Blablabla </p>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>
And my CSS :
html {
height: 100%;
}
body {
height: 100%;
padding-bottom: 30px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}
I've tried Bootstrap's column on the footer like this :
<div class="col-md-12 col-xs-12">
<div class="footer text-center">
<p class="small">© 2017 Le Point G</p>
</div>
</div>
But this method does not seem to be appropriate as it makes it inconsistent on my different pages as the amount of content differs from one page to another, pushing the footer more or less down.
Any better suggestions ?
If I understand your question correctly, you want the footer always to be fixed to the bottom of the window, reguardless of the length of the content of the page.
If so, try position: fixed instead of position: absolute
html {
height: 100%;
}
body {
height: 100%;
padding-bottom:30px;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
background-color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="container">
<div class="row text-center">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>
you can have position:absolute just add
min-height:100%;position:relative;
to your container or row.
.row {
min-height:100%;
position:relative;
}
html {
height: 100%;
}
body {
padding-bottom: 30px;
}
.footer {
position:absolute;
background-color: blue;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<div class="row text-center" >
<p> Blablabla </p>
</div> <!-- row -->
</div> <!-- container -->
<div class="footer text-center">
<p class="small">Alright !</p>
</div>
</body>
</html>
Explanation
The container div has a min-height:100% -- this will ensure it stays the full height of the screen even if there is hardly any content. The container div is set to position:relative; this allows us to absolutely position elements inside it.
The footer has a set height in px. The footer is absolutely positioned with bottom:0 and this moves it to the bottom of the container div. When there is little content on the page the container div is exactly the height of the browser view-port as it is set to min-height:100% and the footer sits at the bottom of the screen. When there is more than a page of content the container div becomes larger and extends down below the bottom of the view-port - the footer is still positioned at the bottom of the container div. The footer is also set to width:100%; so it covers the whole page.
With Bootstrap3 you can use the class navbar-fixed-bottom.
Its not that nice but it works.
HTML:
<html>
<head>..</head>
<body>....
<div class="navbar-fixed-bottom">
<p>Your Text</p>
</div>
</body>
</html>
Something like that, but with "div" tags - w3schools
Snippet:
html, body {
margin: 0%;
padding: 0%;
}
.container {
height: 600px;
background-color: #6c6c6c;
}
myFooter {
background-color: #fff;
}
#media screen and (min-width: 480px){
footer {
position: absoulute;
bottom: 0;
background-color: #000 !important;
}
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid text-center">
<p>Some Text in Container</p>
</div>
<footer class="myFooter text-center">
<p>Footer Text - Resize Window</p>
</footer>
</body>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
<!-- Footer -->
<footer class="page-footer font-small indigo">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Very long link 1
</li>
<li>
Very long link 2
</li>
<li>
Very long link 3
</li>
<li>
Very long link 4
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
MDBootstrap.com
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
Related
I have a problem with aligning icons inside the sidebar. I want to have a few social icons in right-bottom corner of a sidebar.I tried using margins but it looks horrible and ugly.
Here's an example in JSBin (please resize the window to at least 1000px).
html, body, .container-fluid, .row {
height: 100%;
}
body {
background-color: #F2F0F1;
}
.sidebar {
background-color: tomato;
}
#media (min-width: 992px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
display: block;
background-color: tomato;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}
}
ul li {
margin: 0 auto;
line-height: 50px;
list-style: none;
text-align: right;
margin-right: 20px;
}
ul li a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
a:hover {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.4);
padding: 4px;
color: tomato;
}
.hi {
margin-right: 20px;
text-align: right;
color: rgba(0, 0, 0, 0.4);
}
.content {
padding: 2% 4% 2% 4%;
color: rgba(0, 0, 0, 0.4);
background-color: #F2F0F1;
}
#fixedbutton {
position: fixed;
top: 0px;
right: 0px;
}
.sidebar-bottom-wrap {
position: absolute;
bottom: 60px;
right: 40px;
max-width: 200px;
}
.icons-sidebar-unit {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
vertical-align: baseline;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRZEMO PORTFOLIO</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- SIDEBAR -->
<div class="container">
<div class="row">
<div class="col-md-3 sidebar"><div class="foto">
<img src="pic.png" class=" img-responsive img-circle " alt="pic">
</div>
<h3 class="hi">Hi! I am <strong>Mike</strong> ,a front-end developer.</h2>
<!-- MENU -->
<ul>
<li>ABOUT</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
<!-- footer ICONS -->
<footer>
<!--Social icons-->
<div class="social-icons-sidebar">
<a title="Follow us" href="https://twitter.com/uiueux" class="icons-sidebar-unit">
<i class="fa fa-twitter-square"></i>
</a>
<a title="Follow us" href="https://www.facebook.com/Uiueux/" class="icons-sidebar-unit">
<i class="fa fa-facebook-square"></i>
</a>
<a title="" href="#" class="icons-sidebar-unit">
<i class="fa fa-google-plus-square"></i>
</a>
<a title="" href="https://www.youtube.com/playlist?list=PLJkj39CuqdNz7WTWdHTbSrOvQL03sIZa-" class="icons-sidebar-unit">
<i class="fa fa-youtube-square"></i>
</a>
</div>
<div class="copyright">
Copyright © 2017. Designed by
<a href=http://www.uiueux.com>wwwS</a>.
</div><!--End copyright-->
<!--
<i class="fa fa-linkedin A " aria-hidden="true"></i>
<i class="fa fa-github" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
-->
</div>
</footer>
<!-- MAIN -->
<div class="col-md-9 col-md-offset-3 content">
<h2 id="about">ABOUT ME</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea.
<div class="container-fluid">
<h2 id="projects">RECENT PROJECTS</h2>
<div class="row">
<div class="col-md-9">
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="1.png" alt="" class="img-responsive img-thumbnail">
</div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="2.png" alt="" class="img-responsive img-thumbnail">
</div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="3.png" alt="" class="img-responsive img-thumbnail">
</div>
<div class="col-xs 12 col-sm-6 col-sm-6 col-md-6 ">
<img src="4.png" alt="" class="img-responsive img-thumbnail">
</div>
</div>
</div>
</div>
<br>
SKILLZ:<br>
HTML 5 - PRO <br>
CSS 3 - PRO <br>
JS - NOOB <br>
JQUERY - NOOB<br>
SASS - MAD <br>
GRUNT - GOD
<hr>
<h2 id="contact">CONTACT</h2>
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input id="" name="" type="text" placeholder="name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<input id="" name="" type="text" placeholder="email" class="form-control input-md">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-12 control-label" for=""></label>
<div class="col-md-12">
<textarea class="form-control" id="" name="">message</textarea>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-12 control-label" for="singlebutton"></label>
<div class="col-md-12">
<button id="singlebutton" name="singlebutton" class="btn btn-default">send message</button>
</div>
</div>
</fieldset>
</form>
<img src="qrcode1.png" class="img-responsive center-block" alt="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp eu fuglorem Lorem ipsuat nulla pariatur. Exceeu fugiat it in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui r sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The easiest way is probably to absolutely position them .social-icons-sidebar { position: absolute; bottom: 0; right: 0; } https://jsbin.com/petixugodu/1/edit?html,css,output
You could also use flexbox. Make the sidebar a column flex container, set the footer to flex-grow: 1 so that it extends to the bottom of the sidebar, put the social icons at the bottom by using margin-top: auto and order: 1 then align them to the right with text-align: right or align-self: flex-end https://jsbin.com/tukiqonase/edit?html,css,output
To align your icons to the right, try:
.icons-sidebar-unit {
float: right;
}
Also, while looking at your code, I noticed you had a height / width set to 30px on your icon units. If this was to increase the size of the icons themselves, try:
.icons-sidebar-unit {
font-size: 30px;
}
A lot of people get confused on this one because it seems like icons should be styled like images, but they are actually styled as fonts.
This is my html5 code for footer:
<footer>
<div class="footer">
<nav class="footer-nav">
<ul class="list-1">
<li><img src="img/notes.png" alt="" /></li>
<li>ARTICLES</li>
<li>COLUMNS</li>
<li>BLOG</li>
<li>TOPICS</li>
</ul>
<ul class="list-2">
<li>ABOUT</li>
<li>AUTHORS</li>
<li>MASTHEAD</li>
<li>CONTRUBUTE</li>
<li>STYLE GUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style">
<div class="row">
<div class="footer-left">
<img src="img/footer1.png" alt="footer-image" />
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">Less of boring theory! Hands on programming is our training methodology! You'll love it.<p>
learn more
</div>
<div class="footer-right">
<img src="img/footer2.png" alt="footer-image" />
<p class="footer-title">Shopify Expert at $20/hour</p>
<p class="footer-pgf">Unique custom made shopify theme and tweakss. Strat selling online with stunning eCommerce storefronts created using the Shopify CMS</p>
learn more
</div>
</div>
<hr class="hr-style">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
and css:
.footer{
clear:both;
background:url('../img/footer-bg.jpg');
overflow: hidden;
}
.footer-left{
float:left;
width: 50%;
}
.footer-right{
float:right;
width:50%;
}
.footer-nav .list-1 {
font-size:13px;
font-weight:600;
text-align: center;
}
.footer-nav .list-2 {
font-size:12px;
font-weight:600;
text-align: center;
}
.footer-nav ul li{
display:inline;
padding:8px;
}
img{
vertical-align: middle;
}
.copyright{
font-size:13px;
text-align: center;
}
.footer-left:after,.footer-right:after{
clear:both;
content: "";
}
.row{}
In footer i added <hr /> two places, such as top of footer content and top of footer copyright, but it shows only in top footer-content.
What is my mistake, please help me.
This is JSfiddle link what i tried: http://jsfiddle.net/3jet0dfu/14/
You are missing a clear both div
<div style="clear:both;"></div>
inside the
<div class="row">
<div class="footer-left">...</div>
<div class="footer-right">...</div>
</div>
Please see the JSFiddle here
http://jsfiddle.net/3jet0dfu/15/
Try this
<html>
<head>
<style>
.footer
{
clear:both;
background:url('../img/footer-bg.jpg');
overflow: hidden;
}
.footer-left
{
float:left;
width: 50%;
}
.footer-right
{
float:right;
width:50%;
}
.footer-nav .list-1
{
font-size:13px;
font-weight:600;
text-align: center;
}
.footer-nav .list-2
{
font-size:12px;
font-weight:600;
text-align: center;
}
.footer-nav ul li
{
display:inline;
padding:8px;
}
img
{
vertical-align: middle;
}
.copyright
{
font-size:13px;
text-align: center;
}
.footer-left:after,.footer-right:after
{
clear:both;
content: "";
}
.a
{
width:500;
float:left;
}
.row{}
</style>
</head>
<body>
<div style="width:1000;margin:0 auto;">
<header>
<img src="http://s18.postimg.org/tvw52r1ux/logo.jpg" alt="logo">
<h1>The Articles</h1>
<nav class="header-nav">
<ul>
<li><img src="http://s12.postimg.org/hyaxg6xah/icon.png" alt="">Home</li>
<li>Articles</li>
</ul>
</nav>
</header>
<section id="section">
<div class="a">
<article class="article">
<div>
<img src="http://s18.postimg.org/7l8a2s4kp/articles.jpg" alt="articles" />
<p class="comments">by<span class="woo"> JOHN WOO</span>
<date>June 04, 2013, 22 Comments</date></p>
<h1 class="issue">Issue No 376</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
</div>
<div>
<img src="http://s18.postimg.org/dnfwt9t0p/cat.png" alt="" />
<p class="comments">by <span class="woo">JOHN WOO</span> <date>June 04, 2013, 22 Comments</date></p>
<h1 class="issue">Issue No 375</h1>
<p class="lorem">Lorem ipsum dolor sit amer, consectetur adipising elit Vestibulum eu ligula justo, ullamcorper viverraest. Donec viverra libero in tellus ullamcorper lobortis,. Nam nunc metus, molestie sit amet sagitis et, hendrenit quam. Ut hendrerit commodo nunc, eu euismod odio egestas a. Morbi felis lorem, convallis id scelerisque eget, faucibus eget lectus.</p>
<p class="dev-express">asp.net, .net, dev-express</p>
More
</div>
</article>
</div>
<div class="a">
<aside class="aside" style="margin:0 0 0 200;">
<img src="http://s18.postimg.org/51cn8oh0p/agencies.jpg" alt="agencies" />
<h3>From the Blog</h3>
<p class="windows">DAVID <i> on </i>c# Windows</p>
<p class="hex">How to convert System.Color to HTML color (hex)?</p>
<p class="sidebar-pgf">I'm working on an application that requires converting the back color of the panel to HTML that can be used as a div background color. Please help.</p>
<a class="view" href="#">view answer</a>
</aside>
</div>
</section>
<footer>
<div class="footer">
<nav class="footer-nav">
<ul class="list-1">
<li><img src="http://s18.postimg.org/4xe8eom5h/notes.png" alt="" /></li>
<li>ARTICLES</li>
<li>COLUMNS</li>
<li>BLOG</li>
<li>TOPICS</li>
</ul>
<ul class="list-2">
<li>ABOUT</li>
<li>AUTHORS</li>
<li>MASTHEAD</li>
<li>CONTRUBUTE</li>
<li>STYLE GUIDE</li>
<li>CONTACT</li>
<li>SPONSORSHIPS</li>
</ul>
</nav>
<hr class="hr-style">
<div class="row">
<div class="footer-left">
<img src="http://s18.postimg.org/itr24b7s9/footer1.png" alt="footer-image" />
<p class="footer-title">.NET Training</p>
<p class="footer-pgf">Less of boring theory! Hands on programming is our training methodology! You'll love it.<p>
learn more
</div>
<div class="footer-right">
<img src="http://s18.postimg.org/gl8a98bah/footer2.png" alt="footer-image" />
<p class="footer-title">Shopify Expert at $20/hour</p>
<p class="footer-pgf">Unique custom made shopify theme and tweakss. Strat selling online with stunning eCommerce storefronts created using the Shopify CMS</p>
learn more
</div>
</div>
<hr class="hr-style">
<p class="copyright">Copyright © 2013 Dot Net How</p>
</div>
</footer>
</div>
</body>
</html>
Hi I am trying to make a carousel on my wordpress website with bootstrap. I would like to put four block links next to it. I have the blocks there and the images are scrolling fine, However I believe the carousel is changing the height of the image.
I have images (640 x 360) and I made the 4 blocks 90 pixels high. I did this so the blocks would be flush with the bottom of the carousel. Except the blocks are too big. I don't understand what the problem could be. And I have searched through all of the CSS.
Here is my code:
<!--==========================================-->
<!-- Carousel -->
<!--==========================================-->
<div>
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<!--Carousel item 1-->
<div class="item active">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/ej-manuel.png" alt="buffalo-skyline" width="640" height="360" />
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<!--Carousel item 2-->
<div class="item">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/image3.jpg" width="640" height="360" />
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<!--Carousel item 3-->
<div class="item">
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" width="640" height="360" >
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<!--==========================================-->
<!-- Side Buttons -->
<!--==========================================-->
<div>
<ul class="nav nav-tabs nav-stacked">
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 4</a></li>
<li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 5</a></li>
</ul>
</div>
The reason why your image is resizing which is because it is fluid. You have two ways to do it:
Either give a fixed dimension to your image using CSS like:
.carousel-inner > .item > img {
width:640px;
height:360px;
}
A second way to can do this:
.carousel {
width:640px;
height:360px;
}
add this to your css:
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
}
Put the following code in your CSS, this works with Bootstrap 4:
.w-100 {
width: 100% !important;
height: 75vh;
}
I had the same problem. You have to use all the images with same height and width. you can simply change it using paint application from windows using the resize option in the home section and then use CSS to resize the image. Maybe this problem occurs because the the width and height attribute inside the tag is not responding.
Put the following code into head section in your web page programming.
<head>
<style>.carousel-inner > .item > img { width:100%; height:570px; } </style>
</head>
replace your image tag with
<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" style="width:640px;height:360px" />
use style attribute and make sure there is no css class for image which set image height and width
Use this code to set height of the image slider to the full screen / upto 100 view port height. This will helpful when using bootstrap carousel theme slider.
I face some issue with height the i use following classes to set image width 100% & height 100vh.
<img class="d-block w-100" src="" alt="" > use this class in image tags & write following css code in style tags or style.css file
.carousel-inner > .carousel-item > img {
height: 100vh;
}
Give class img-fluid to your div carousel-item.Finally it will be:
<div class="carousel-item active img-fluid">
<img class="d-block w-100" src="path to image" alt="First slide">
</div>
This worked for me, max-height allows the images to auto adjust instead of cropping them
<div class="carousel-item">
<img src="image-link" class="d-block w-100" alt="image" style="max-height:100vh;">
</div>
Had the same problem and none of the CSS solutions presented here worked.
What worked for me was setting up a height="360" without setting any width. My photos aren't the same size and like this they have room to adjust their with but keep the height fixed.
This css is work for me # Bootstrap 5 (You can change width & height)
.carousel-inner > .carousel-item > img {
width:640px;
height:360px;
}
i had this issue years back..but I got this. All you need to do is set the width and the height of the image to whatever you want..what i mean is your image in your carousel inner ...don't add the style attribut like "style:"(no not this) but something like this and make sure your codes ar correct its gonna work...Good luck
I am writing a basic website in HTML5, i have all the site structure in place and so far everything has been working well.
However I have one section that seem to go off on its own a bit.
as soon as I had a height to the section the sections moves to the top of the article behind the top two section where the actual content within the section stays in place.
<article><section class="welcome-box">
<section class="welcome-wrapper">
<div class="welcome-hello">
<div class="welcome-hellotext">HELLO, WELCOME TO SAA RECRUITMENT </div>
</div>
<div class="welcome-line"></div>
<div class="welcome-textbox">
<div class="welcome-textboxtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
</div>
<div class="welcome-button">
<div class="welcome-buttontext">READ MORE</div>
</div>
</section>
</section>
<section class="home-slider">
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
<img src="images/slide_1.jpg" alt="" />
</div>
<div class="slide2">
<img src="images/slide_2.jpg" alt="" />
</div>
<div class="slide3">
<img src="images/slide_3.jpg" alt="" />
</div>
<div class="slide4">
<img src="images/slide_4.jpg" alt="" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
</section>
<!-- Slider Script -->
<script type="text/javascript">
$(document).ready(function() {
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav'
});
});
</script>
<!-- End Slider Script -->
<section class="about-box">
<div class="about-boxtitle">TITLE HERE</div>
<div class="about-boxline"></div>
<div class="about-boxtext"></div>
</section>
<section class="news-box">
<div class="news-boxtitle">NEWS</div>
<div class="news-boxline"></div>
<div class="news-boxtext"></div>
</section>
<section class="clients-box">
<div class="clients-boxtitle">CLIENTS</div>
<div class="clients">client</div>
<div class="clients">client</div>
<div class="clients">client</div>
</section>
</article>
The section I am having trouble with is the one with a class of "clients-box" (very last section)
Here is the CSS:
.clients-box {
width: 960px;
margin-top: 10px;
background-color: #FFF;
}
ul.clients {
width: 940px;
height: 40px;
margin: 0 auto 0;
}
ul.clients li.client {
width: 150px;
height: 40px;
display: inline-block;
background-color: #039;
clear: both;
The website is live here: http://dev.saarecruitment.com/
.clients-box needs either float: left or float: right. You can add margin: 10px auto to center it with 10px top/bottom margins.
You have used float on all the above <sections> which means that they are not occupying space. Thus this box got to the top, under the floated elements.
Easiest way would be to apply a float: left to this box as well.
An alternative method, inspired by #Mr. Alien would be to just apply clear:left to this block.
How to make the caption of a Twitter Bootstrap thumbnail be placed to the right of the image instead of below? Preferably in CSS. So far I am just using existing tags as my css knowledge is very limited.
<ul class="thumbnails">
<li class="span2">
<div class="thumbnail span4">
<div class="span2">
<img src="http://placehold.it/120x160" alt="">
</div>
<div class="caption">
<h5>Thumbnail label </h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
<p>Action Action</p>
</div>
</div>
</li>
</ul>
With a slight modification of your HTML, and the addition of a new class (right-caption), a few CSS rules should cover you.
HTML
<div class="thumbnail right-caption span4">
<img src="http://placehold.it/120x160" alt="">
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
<p>Action Action</p>
</div>
</div>
Note: I'm taking the <img> out of the <div> you originally wrapped it in.
CSS
.thumbnail.right-caption > img {
float: left;
margin-right: 9px;
}
.thumbnail.right-caption {
float: left;
}
.thumbnail.right-caption > .caption {
padding: 4px;
}
Note: The margin and padding are just stylistic; floating is the key.
JSFiddle
No additional css. Change a/span tags to div if needed
<a href="..." class="thumbnail clearfix">
<img src="..." class="pull-left">
<span class="caption pull-right">
Lorem ipsum
</span>
</a>