Hi guys got a simple question about bootstrap, trying to make a footer resposive but for some reason i cant seem to do it, any help on making this footer resposive for mobiles etc would be great.
So far i have:
Not sure what i should be doing, new to this :0
Thanks for the help
Not really sure what kind of look your going for but if you are looking for but assuming that you are going for something that has a left and right section and then at mobile sizes stacks to make it more viewable you can do something like the following:
Here is a fiddle to show you the result Fiddle Demo
<footer>
<div class="container">
<div class="row">
<div class="col-sm-8 footer-left">
<img class="footer-logo" src="http://placehold.it/250x250" />
Link
Link
Link
Link
</div>
<div class="col-sm-4 footer-right">
<a class="fa fa-facebook" href="#"></a>
<a class="fa fa-twitter" href="#"></a>
<a class="fa fa-instagram" href="#"></a>
</div>
</div>
</div>
</footer>
And responsive Css
#media screen and (min-width:768px){
.footer-right{text-align:right;}
}
#media screen and (max-width:767px){
.footer-left, .footer-right{text-align:center;}
.footer-logo{display:block;margin:5px auto;}
}
To give you an example of how you can structure your HTML:
footer{
background-color:yellow;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<footer class="col-sm-12">
<div class="row">
<p class="col-sm-6 pull-left">Left content</p>
<p class="col-sm-6 pull-right">Right content</p>
</div>
</footer>
</div>
Learn about Bootstrap Grid system: http://getbootstrap.com/css/#grid
Simple Bootstrap Layout
Here is a working jsfiddle of your missing elements: https://jsfiddle.net/odx59t0p/
<div class="logo1">
<img src="Image/Logo.png" class="img-responsive"/>
<div class="col-sm-3">
<p>Reference/About
</div>
</div>
Please note: The only things that have been added are:
Links to required CSS / JS files (which you should already have in your head tags)
"row" class to "navbar-text"
"col-sm-*" classes to divs around menu items.
Related
I'm having some real trouble trying to align icons within their divs. Nothing I try works whether it be creating custom CSS or trying to use bootstrap's text-align-center.
Here's a cut down example of the navbar:
<div id="appSidenav" class="sidenav">
<button class="closebtn btn" id="navClose" onclick="closeNav()"><i class="fas fa-chevron-left"></i></button>
<button class="openbtn btn" id="navOpen" onclick="openNav()"><i class="fas fa-bars"></i></button>
<a href="#" class="pt-3">
<div class="row">
<div class="col-2">
<i class="fas fa-home"></i>
</div>
<div class="col">
<span>Home</span>
</div>
</div>
</a>
<a href="#">
<div class="row">
<div class="col-2">
<i class="fas fa-users"></i>
</div>
<div class="col">
<span>Contacts</span>
</div>
</div>
</a>
</div>
I've tried to add text-center to the cols, I've also tried adding text-align: center; to the CSS but nothing seems to make any difference. I've also tried different sized cols and cols with no padding or margin.
I've tried adding an alignment to pretty much every tag or class and nothing works.
Any ideas?
Thanks!
UPDATE
Nobody seems to quite understand what I'm getting at, so I'll post a picture.
I've tried to align the icons using both CSS and bootstrap classes. I can live with it I guess but it's a bit annoying. Here's what's happening:
I don't understand what you mean exactly,
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome 5 Icons</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<!--Get your own code at fontawesome.com-->
</head>
<body>
<div id="appSidenav" class="sidenav">
<button class="closebtn btn" id="navClose" onclick="closeNav()"><i class="fas fa-chevron-left"></i></button>
<button class="openbtn btn" id="navOpen" onclick="openNav()"><i class="fas fa-bars"></i></button>
<a href="#" class="pt-3">
<div class="row">
<div class="col-2">
<i class="fas fa-home"></i> <span>Home</span>
</div>
</div>
</a>
<a href="#">
<div class="row">
<div class="col-2">
<i class="fas fa-users"></i> <span>Contacts</span>
</div>
</div>
</a>
</div>
</body>
</html>
If you want to center align them, you can:
try text-align: center on the parent/wrapper of the item you are trying to center align
another method is to add display: flex to the parent/wrapper and margin: auto to the item you are trying to center align.
i assume that you want to center align a link... If so i think u are supposed to add "a" after the div class in css... I will take home for exmaple.
I think the css should look something like,
.col a{ text-align:cenetr; }
Hopefully it helps.. thx
I am working on the website, I am not a pro in bootstrap. Here is the header I have with the theme:
I want to replace the address with 3 small png images i.e BBB A+ Accredited Business and Google Partner.
Like this: (Photoshoped)
Here is the widget code:
<div class="col-xs-12 col-sm-9 col-lg-10 start-xs start-sm">
<aside id="text-3" class="widget header-right widget_text">
<div class="textwidget">
<div class="container extra-info">
<div class="row">
<div class="col-sm-5 col-md-5">
<i class="fa fa-phone"></i>
<div class="phone">
<h3>1-775-97-377</h3>
<span>info#thememove.com</span>
</div>
</div>
<div class="col-sm-7 col-md-6">
<i class="fa fa-home"></i>
<div class="address">
<h3>14 Tottenham Court Road</h3>
<span>London, England.</span>
</div>
</div>
</div>
</div>
</div>
</aside>
</div>
Will you please let me know which will be the right tags and code I can use?
I am having an issue with alignment too! col-md, I want to hide it in the mobile version (maybe col-xs)
Help will be really appreciated!
Try replacing the address contents with another row and the three divs as below. Remember the columns need to add up to 12 for the grid to work as it should.
<div class="address">
<div class="row">
<div class="col-md-4">logo here</div>
<div class="col-md-4">logo here</div>
<div class="col-md-4">logo here</div>
</div>
Also with regard to hiding columns, I know bootstrap has various ways of doing that with the adding of their classes but also look at media queries.
#media only screen and (max-width: 960px) {
.whatever {
display:none;
}
}
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
As stated in the title, I have a div with a class .container and, for some reason, the div is not being displayed but the contents of the div are being displayed. The height of the .container is also 0
This is the HTML:
{block name='header_logo'}
<div class="header-logo">
<div class="container">
<div class="row">
<div class="col-md-2 hidden-sm-down" id="_desktop_logo">
<a href="{$urls.base_url}">
<img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
</a>
</div>
</div>
</div>
</div>
{/block}
and this is the inspector output:
<div class="header-logo">
<div class="col-md-2 hidden-sm-down" id="_desktop_logo">
<a href="...">
<img class="logo img-responsive" src="..." alt="some text">
</a>
</div>
</div>
If you look at the inspector output, you will see that the .container and the .row div's are not begin created. Any help will be highly appreciated.
Not sure if it's necessary, but I'm basing my theme of the prestashop classic theme.
Is it because you have the height as 0 ? Idk, im still new to this ...
Verify you included bootstrap correctly, Add this line to your html, between <head> and </head>,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
I have a site I designed and coded that seems to cut off top and bottom on very specific devices that have short screens AND WILL NOT SCROLL. Any ideas on that I can do to keep the picture centered in the browser without any overlapping
Here's a link to jsfiddle:
https://jsfiddle.net/SCATORY/mjyssu7y/
<body>
<div id="container">
<div class="container">
<div class="nav">
<div class="logo"></div>
</div>
</div>
<div class="container holder">
<div class="center">
<div class="height">
<h1>Practice yoga. <br>In hypo-microbial style.</h1>
</div>
<div class="bag">
</div>
<div class="height-2">
<h2>Introducing ThePureBag™.<br>
The germ-resistant way to carry your yoga gear in style.</h2>
<div class="margin">
<button class="contact">Contact Us</button>
</div>
</div>
</div>
</div>
</div>
<div id="grey">
</div>
</body>
Take the position:fixed off of the #container and take the position:absolute off of the .holder. This should make it work.
Position:fixed means that the element won't scroll.
I have two menus, one is fixed to the bottom and another fixed to the top. My problem is two-fold. I want them to appear at the center of the screen and only be the width of their content (instead of being fluid, as per default).
I have found nothing in the documentation to indicate that this is possible, so presumably the solution is to modify it with CSS?
Any help would be greatly appreciated.
Use the semantic ui class "compact" for your UI menus to adjust to content, and then use grids and columns for center alignment.
So for example:
<div class="ui centered grid">
<div class="center aligned column">
<div class="ui compact menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
</div>
</div>
</div>
JSFiddle Link: http://jsfiddle.net/pLskpufp/2/
You can also just use a center aligned container:
<div class="ui center aligned container">
<div class="ui compact menu">
<a class="active item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
</div>
</div>
JSFiddle Link: http://jsfiddle.net/377v6ect/1/
I know it's not a pure Semantic UI solution, but for those of you looking for a way to do this with a fixed menu in Semantic UI, the best solution I've found so far is to wrap it in a div with a little custom CSS.
<div className="fixed bottom">
<div className="ui centered grid">
<div className="center aligned column">
<!-- Your Semantic UI menu here, but not fixed. -->
</div>
</div>
</div>
Along with this css...
div.fixed {
width: 100%;
position: fixed;
}
div.fixed.bottom {
bottom: 0;
}
div.fixed.top {
top: 0;
}
I have searched on the semantic forums and other places; created mine.. Hope works for you too.
<div class="ui center aligned container">
<div class="ui" style="background-color: #009999;">
<!-- <a href="https://semantic-ui.com/examples/fixed.html#" class="header item"> -->
<div class="ui centered small image" >
<a href="#">
<img class="logo" src="./logo_white.png">
</a>
</div>
<!-- </a> -->
</div>
</div>