But when I put my css cards they don't come out well on mobile
It turns out that when you use the code that I have left below, the cards overlap over the footer and the footer does not go down at all
base.html.twig with header and footer
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="icon" href="/public/svg/logoPlanesSinFondo.svg">
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
{% if form is defined and form %}
{% form_theme form 'bootstrap_5_layout.html.twig' %}
{% endif %}
{% block stylesheets %}
<link href="/css/base.css" rel="stylesheet" type="text/css">
<link href="/css/main.css" rel="stylesheet" type="text/css">
<link href="/css/cards.css" rel="stylesheet" type="text/css">
<link href="/css/family.css" rel="stylesheet" type="text/css">
<link href="/css/login.css" rel="stylesheet" type="text/css">
<link href="/css/calendar.css" rel="stylesheet" type="text/css">
<link href="/css/calendario.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.11.3/main.min.css" integrity="sha256-5veQuRbWaECuYxwap/IOE/DAwNxgm4ikX7nrgsqYp88=" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
{% endblock %}
</head>
<body>
{% block menu %}
<nav class="navbar navbar-dark navbar-expand">
<div class="container-fluid">
<a href="https://www.iesjoseplanes.es/" target="_blank">
<img id="icon" src="/svg/logoPlanesSinFondo.svg">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto">
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
<a class="nav-link" href="{{ path('app_logout') }}">
Cerrar sesión
</a>
{% else %}
<a class="nav-link" href="{{ path('app_login') }}">Iniciar sesión</a>
<a class="nav-link" href="{{ path('app_register') }}">Registrar</a>
{% endif %}
</div>
</div>
</div>
</nav>
{% endblock %}
{% block body %}
{% endblock %}
{% block footer %}
<footer class="footer-distributed">
<div class="footer-left">
<p class="footer-links">
Home
</p>
<p class="footer-company-name">© 2022 Eduonix Learning Solutions Pvt. Ltd.</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-phone"></i>
<p>+91 22-27782183</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p>support#eduonix.com</p>
</div>
</div>
<div class="footer-right">
<div class="footer-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
</div>
</div>
</footer>
{% endblock %}
{% block javascripts %}
<script src="/public/javascripts/navbar.js"></script>
<script src="https://unpkg.com/#lottiefiles/lottie-player#latest/dist/lottie-player.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="/javascripts/sweetalert2.all.min.js"></script>
{% endblock %}
</body>
</html>
My familia.html.twig when adapted for mobile the footer is placed behind the body
{% extends 'base.html.twig' %}
{% block title %}Familia{% endblock %}
{% block body %}
<div id="familyBody">
<div id="containerCards" class="container">
<div id="cardfamily1" class="card">
<div class="slide slide1">
<div class="content">
<a href="{{path('showTutores')}}" class="icon">
<img aria-hidden="true" style="width:300px;"></img>
</a>
</div>
</div>
<div class="slide slide2">
<a href="{{path('showTutores')}}" class="content">
<h3>Tutoría</h3>
</a>
</div>
</div>
<div id="cardfamily2" class="card">
<div class="slide slide1">
<div class="content">
<a href="{{path('showSecretaria')}}" class="icon">
<img aria-hidden="true" style="width:300px;"></img>
</a>
</div>
</div>
<div class="slide slide2">
<a href="{{path('showSecretaria')}}" class="content">
<h3>Secretaría</h3>
</a>
</div>
</div>
<div id="cardfamily3" class="card">
<div class="slide slide1">
<div class="content">
<a href="{{path('showOrientacion')}}" class="icon">
<img aria-hidden="true" style="width:300px;"></img>
</a>
</div>
</div>
<div class="slide slide2">
<a href="{{path('showOrientacion')}}" class="content">
<h3>Orientación</h3>
</a>
</div>
</div>
</div>
<lottie-player id="buttonReturn" class="btn btn-primary" src="https://assets9.lottiefiles.com/packages/lf20_tuwojxyr.json" background="transparent" speed="1" style="width: 70px; height: 40px;" loop autoplay></lottie-player>
</div>
{% endblock %}
This is the css
body{
width: 100%;
height: 100%;
}
/* .row{
display: flex;
}
#container{
display: flex;
flex-direction: column;
height: calc(100vh - 24.045407636738908vh);
} */
#familyBody{
display: flex;
flex-direction: column;
height: calc(100vh - 24.045407636738908vh);
width: 100vw;
flex-wrap: wrap;
}
#containerCards{
display: flex;
height: calc(100vh - 28.99587203302374vh);
justify-content:space-around;
align-items: center;
flex-wrap: wrap;
}
#buttonReturn{
width: 70px;
margin-left: 20px;
}
Can anybody help me?
Related
these 3 icon is close to each other, I want to increase the size of these 3 icon, and separate them from each other. is there anybody who can show me how to do this in a single line using css3?, I'm using Bootstrap5 and Google Icons.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
html code:
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
<a href="{% url 'notification' %}" style="text-decoration: none;">
<span class="material-icons">notifications</span>
{% if unread_notifications %}
<span class="badge bg-secondary">{{unread_notifications}}</span>
{% endif %}
</a>
<a href="{% url 'Profile' user.id %}">
<span class="material-icons">person</span>
</a>
<a href="{% url 'Profile' user.id %}">
<span class="material-icons">logout</span>
</a>
</div>
</div>
</div>
For the Item distances you can achieve this using gap: gapValue css property. It sets the gap between flex-items. Just make your <a> display property to block as well.
For the Icon sizes, since you're using a font, you can change their size using font-size: yourDesiredValue
.row .col {
gap: 20px; /* Change this to your desired space */
}
.row .col a{
display: block;
}
.row .col .material-icons{
font-size: 28px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
<a href="">
<span class="material-icons">notifications</span>
</a>
<a href="">
<span class="material-icons">person</span>
</a>
<a href="">
<span class="material-icons">logout</span>
</a>
</div>
</div>
</div>
Size of them can be set using font-size. Space them using margin (for example).
Tip: to get rid of the underline near the icons, use text-decoration: none;
Finally, you should use a parent class for those ".my-toolbar" to encapsulate the style of those specific links/icons.
a {
text-decoration: none;
}
span.material-icons {
font-size: 4em;
margin-right: 120px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> html code:
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
<a href="{% url 'notification' %}" style="text-decoration: none;">
<span class="material-icons">notifications</span>
</a>
<a href="{% url 'Profile' user.id %}">
<span class="material-icons">person</span>
</a>
<a href="{% url 'Profile' user.id %}">
<span class="material-icons">logout</span>
</a>
</div>
</div>
</div>
I was trying to make a Carousel containing multiple images in row and sliding one images at a time with bootstrap only. Like this:
I tried following this post. Instead of bootstrap-3.3.6 and jquery-2.2.2 I used bootstrap-4.3.1 and jquery-3.3.1 But in my case images are in vertical order instead of horizontal order. What am I doing wrong? How can I arrange images in horizontal order?
$(document).ready(function () {
$('.fdi-Carousel .carousel-item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
#outerCarousel {
width: 100%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: tomato !important;
}
.carousel-inner.onebyone-carousel {
margin: auto;
width: 90%;
}
.onebyone-carousel .active.carousel-item-left {
left: -33.33%;
}
.onebyone-carousel .active.carousel-item-right {
left: 33.33%;
}
.onebyone-carousel .carousel-item-next {
left: 33.33%;
}
.onebyone-carousel .carousel-item-prev {
left: -33.33%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<main role="main">
<div class="container">
<div class="row">
<div id="outerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="5000"
data-pause="false">
<div id="innerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="0"
data-pause="false">
<div class="carousel-inner onebyone-carousel">
<div class="carousel-item active">
<div class="col-md-4">
<img src="http://placehold.it/100/4287f5/000&text=1">
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<img src="http://placehold.it/100/f57b42/000&text=2">
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<img src="http://placehold.it/100/42f58a/000&text=3">
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<img src="http://placehold.it/100/a442f5/000&text=4">
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<img src="http://placehold.it/100/d1f542/000&text=5">
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<img src="http://placehold.it/100/f5429e/000&text=6">
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<img src="http://placehold.it/100/42cef5/000&text=7">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#innerCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#innerCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
Thanks.
First, the code you provided was pretty buggy. I believe there are many online carousel example that are just copy&paste from someone else but never try to understand the code, instead, they keep adding more buggy code to fix the problem they can "see", just be careful.
There are many useless <div> wrappers and CSS stylings that intend to fix the buggy behaviors, which obviously makes the debug process worse.
I kindly suggest that you can take a look at the official document first to see the structure for those component and then slowly implement the ideas based on the SO answers.
I just delete most of them from your code for demonstration purpose only.
In order to make it responsive, I believe you have to modify the js code so it can fill up the carousel for different col-size as well as CSS. But it seems like there is not an easy way to work around for CSS part.
$(document).ready(function () {
$('.fdi-Carousel .carousel-item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
//this will only work for carousel with 3 items since it only adds next() and next.next();
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: tomato !important;
}
.fdi-Carousel .carousel-inner .active.carousel-item,
.fdi-Carousel .carousel-inner .carousel-item-next,
.fdi-Carousel .carousel-inner .carousel-item-prev {
display: flex;
}
/* 'Again 33% means col-4, in order to make it responsive or whatever you want, you have to create different translateX() for differernt col' */
.fdi-Carousel .carousel-inner .active.carousel-item-left, .fdi-Carousel .carousel-inner .carousel-item-prev {
transform: translateX(-33.33%);
}
.fdi-Carousel .carousel-inner .active.carousel-item-right, .fdi-Carousel .carousel-inner .carousel-item-next {
transform: translateX(33.33%);
}
.fdi-Carousel .carousel-inner .carousel-item-left, .fdi-Carousel .carousel-inner .carousel-item-right {
transform: translateX(0);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row w-100">
<div class="col">
<div id="outerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="5000">
<div class="carousel-inner row no-gutters">
<div class="carousel-item active">
<div class="col-4 text-center">
<img src="http://placehold.it/100/4287f5/000&text=1">
</div>
</div>
<div class="carousel-item">
<div class="col-4 text-center">
<img src="http://placehold.it/100/f57b42/000&text=2">
</div>
</div>
<div class="carousel-item">
<div class="col-4 text-center">
<img src="http://placehold.it/100/42f58a/000&text=3">
</div>
</div>
<div class="carousel-item">
<div class="col-4 text-center">
<img src="http://placehold.it/100/a442f5/000&text=4">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#outerCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#outerCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function() {
$('.fdi-Carousel .carousel-item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
#innerCarousel {
width: 100%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: tomato !important;
}
.carousel-inner.onebyone-carousel {
margin: auto;
width: 90%;
}
.onebyone-carousel .active.carousel-item-left {
left: -33.33%;
}
.onebyone-carousel .active.carousel-item-right {
left: 33.33%;
}
.onebyone-carousel .carousel-item-next {
left: 33.33%;
}
.onebyone-carousel .carousel-item-prev {
left: -33.33%;
}
.carousel-item img {
width: 33%;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<main role="main">
<div class="container">
<div class="row">
<div id="innerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="5000" data-pause="false">
<div class="carousel-inner onebyone-carousel">
<div class="carousel-item active">
<img src="http://placehold.it/100/4287f5/000&text=1">
</div>
<div class="carousel-item">
<img src="http://placehold.it/100/f57b42/000&text=2">
</div>
<div class="carousel-item">
<img src="http://placehold.it/100/42f58a/000&text=3">
</div>
<div class="carousel-item">
<img src="http://placehold.it/100/a442f5/000&text=4">
</div>
<div class="carousel-item">
<img src="http://placehold.it/100/d1f542/000&text=5">
</div>
<div class="carousel-item">
<img src="http://placehold.it/100/f5429e/000&text=6">
</div>
<div class="carousel-item">
<img src="http://placehold.it/100/42cef5/000&text=7">
</div>
</div>
<!-- .carousal-inner -->
<a class="carousel-control-prev" href="#innerCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#innerCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- .carousel -->
</div>
<!-- .row -->
</div>
<!-- .container -->
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
The code is fixed using some HTML and CSS modifications. The fix will make carousal images be displayed in horizontal layout. Here are the list of things I changed
Added width to img in the carousel
Removed the div.col-md-4
Removed #outerCarousel
I'm using Brackets text editor and everything's working great (runs the same through Brackets as it does with Codepen) apart from one thing:
I'm using a CSS media query to set a breakpoint so I only have one column in a at max-width 537px.
#media (max-width: 537px) {
.custom-column {
width: 100%;
}
}
<div class="col-sm-4 col-xs-6 custom-column">
<img src="#" alt="#" width="100%">
<p>Me</p>
</div>
For some reason it works in Codepen but not when I run my text editor in Chrome. Is it something to do with my 'head' element maybe?
<!DOCTYPE html="en">
<html lang>
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Icons for footer -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
and here's the codepen: [http://codepen.io/SimmoSim/pen/wJgpwg?editors=1100][1]
I solved this issue. I also had this issue with Mozzilla, and I fixed it by commending your bootstrap cdn link and using my bootstrap link.
I understood it, because as it worked with code pen, I thought it may be connected to the stylesheet bootstrap cdn not loading.
This is the bootstrap cdn I am using, I include it in my header tags:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet" />
</head>
This is the rest of my my working code:
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
</head>
<body>
<!DOCTYPE html="en">
<html lang>
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<!-- Latest compiled and minified CSS -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
<!-- Icons for footer -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
</body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Simmo Simpson Web Design</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li><a href="#contact" >Contact</a></li>
</ul>
</div>
</nav>
<div id="about" class="container-fluid">
<div class="row">
<div class="col-xs-5 custom-about">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" class="img-circle" alt="My face" width="100%">
</div>
<div class="col-xs-7 custom-about">
<h1>Simmo Simpson</h1>
<h4>Freelance Web Design & Photography<br><br>
Feel free to take a look at my work</h4>
</div>
</div>
<section class="container-fluid" id="portfolio">
<h1>PORTFOLIO</h1>
<div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
<div class="col-sm-4 col-xs-6 custom-column">
<img src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" alt="My face" width="100%">
<p>Me</p>
</div>
</div>
</section>
</div>
<h1 id="contact">CONTACT ME</h1>
<div>
<P style="padding-left:5%" class="text-right">Need a website? Some quality photography?<br><br>Drop me a line on your prefered social media<br> platform by clicking a link below.<br><br>
Want some advice to become more productive?<br><br>Check out my blog by clicking the W icon.<br><br>
</P>
</div>
<div class="footer-social-icons">
<ul class="social-icons custom-social-icon">
<li> <i class="fa fa-facebook custom-social-icon"></i></li>
<li> <i class="fa fa-twitter custom-social-icon"></i></li>
<li> <i class="fa fa-linkedin custom-social-icon"></i></li>
<li> <i class="fa fa-instagram custom-social-icon"></i></li>
<li> <i class="fa fa-wordpress custom-social-icon"></i></li>
<li> <i class="fa fa-github"></i></li>
</ul>
<br>
</div>
<script
src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script
src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
This is my layout with no body
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Shop | E-Shopper</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/prettyPhoto.css" rel="stylesheet">
<link href="~/Content/price-range.css" rel="stylesheet">
<link href="~/Content/animate.css" rel="stylesheet">
<link href="~/Content/main.css" rel="stylesheet">
<link href="~/Content/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="~/Content/images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="~/Content/images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="~/Content/images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="~/Content/images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="~/Content/images/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<header id="header">
<!--header-->
<div class="header-middle">
<!--header-middle-->
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="logo pull-left">
<a href="#Url.Action("Index", "Home")">
<img src="~/Content/images/home/logo.png" alt="" />
</a>
</div>
</div>
<div class="col-sm-8">
<div class="shop-menu pull-right">
<ul class="nav navbar-nav">
#if (Session["Name"] != null)
{
<li style="margin-top:10px">
<p>
Welcome
#Session["UserName"].ToString()
</p>
</li>
<li><i class="fa fa-user"></i> Account</li>
<li>
<a href="#Url.Action("Logout", "Account")">
Logout
</a>
</li>
}
else
{
<li>
<a href="#Url.Action("Login", "Account")">
Login
</a>
</li>
}
</ul>
</div>
</div>
</div>
</div>
</div><!--/header-middle-->
<div class="header-bottom">
<!--header-bottom-->
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="mainmenu pull-left">
<ul class="nav navbar-nav collapse navbar-collapse">
<li>
<a href="#Url.Action("ListOfProductCategory", "ProductCategory")" class="elements">
<span>Manage Product categories</span>
</a>
</li>
<li>
<a href="#Url.Action("ListOfProducts", "Product")" class="elements">
<span>Manage Products</span>
</a>
</li>
<li>
<a href="#Url.Action("ShowUsers", "Home")" class="elements">
<span>Manage Customers</span>
</a>
</li>
<li>
<a href="#Url.Action("ViewOrders", "Home")" class="elements">
<span>View Orders</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
#RenderBody()
</div>
</div>
<footer id="footer">
<!--Footer-->
<div class="footer-bottom">
<div class="container">
<div class="row">
<p class="pull-left">Copyright © 2016 Shopping cart. All rights reserved.</p>
<p class="pull-right">Designed by <span><a target="_blank" href="http://www.atdrive.com">AtDrive</a></span></p>
</div>
</div>
</div>
</footer><!--/Footer-->
#RenderSection("scripts", required: false)
</section>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/price-range.js"></script>
<script src="~/Scripts/jquery.scrollUp.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.prettyPhoto.js"></script>
<script src="~/Scripts/main.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
</body>
</html>
This is my main.css having id footer which is used for the footer.
#footer {
background: #F0F0E9;
}
I dont know how to keep this footer at the bottom. it is getting at the middle when no body content is there.
Try this:
#footer {
position: absolute;
height: 50px;
width: 100%;
bottom: 0px;
border-top: solid 1px black;
}
use this Logic :
*{
box-sizing: border-box;
}
body, html{
height: 100%;
width: 100%;
margin: 0;
}
body{
display:flex;
flex-direction: column;
}
#container
{
margin: 0 auto;
width:80%;
background-color: white;
border: 0.2em solid black;
flex-shrink:0;
flex-grow:1;
display:flex;
}
#footer
{
margin: 0 auto;
width:100%;
text-align: center;
height:1.5em;
background-color: white;
border: 0.2em solid black;
flex-shrink:0;
}
.col {
height:90%;
flex-shrink:0;
flex-grow:1;
margin:0 2% 0 2%;
}
<div id="container">
<div class="col">
test column 1
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
</div>
<div class="col">
test column 2
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
<p>
blah blah blah...
</p>
</div>
</div>
<div id="footer">
test content
</div>
I need some help with Bootstrap 3. My menu toggle is not working: when I resize the browser the menu is not hiding and so when I click the toggle button nothing happens.
and I also want to align my small background with the menu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EGT DESIGN</title>
<meta name="viewport" content="width=device-width, inital-scale=1,maximum-scale=1">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href="css/custom.less" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- FAVICON -->
<link rel="icon" href="images/EGTico.ico" type="image/ico" sizes="16x16">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<nav class="navbar-inverse navbar-static-top" id="main-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-
collapse">
<span class="sr only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="images/egtdesign-logo.png">EGT DESIGN
</div>
<div class="collapse navbar-collapse navbar-right" id="nav-collapse">
<ul class="nav navbar-nav " >
<li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span>
HOME</a></li>
<li><a href="portfolio.html"><span class="glyphicon glyphicon-book"></span>
PORTFOLIO</a></li>
<li><a href="" data-toggle="modal" data-target="#modal-contact-form"><span
class="glyphicon glyphicon-envelope"></span> CONTACT</a>
</li>
<!--SOCIAL MEDIA -->
<li><a href="http://www.facebook.com"><img src="images/facebook_ico.png"
alt="Facebook"></a></li>
<li><img src="images/twitter_ico.png"></li>
<li><img src="images/google plus.png"></li>
<li><img src="images/Linkdin_ico.png">
</li>
</ul>
</div><!--END MENU collapse-->
</div><!--END OF CONTAINER-->
</nav>
and here's the code for the image to be aligned:
<div class="container">
<div class="bg-pattern">
<img src="images/BG w pattern 1.png"/>
</div>
<div class="bg-line1">
<img src="images/line w shine 1.png" >
</div>
<!--IMAGE CONTENT-->
<div class="row">
<div class="bg-container">
<div class="col-lg-12">
<img class="img-responsive center-block" src="images/winning logo.png" >
<p class="text-center"><a href="#">Logo Design<span class="glyphicon glyphicon-chevron-
right"></span></a></p>
</div>
<div class="row">
<div class="col-lg-4">
<img src="images/brochure.png">
<p class="text-center"><a href="#">Brochure Design<span class="glyphicon glyphicon-
chevron-right"></span></a></p>
</div>
<!--CLEAR-->
<div class="clearfix visible-xs-block"></div>
div class="col-lg-4">
<img src="images/Label.png">
<p class="text-center"><a href="#">Label Design<span class="glyphicon glyphicon-
chevron-right"></span></a></p>
</div>
<div class="col-lg-4">
<img src="images/otherportfolio.png">
<p class="text-center"><a href="#" class="img-otherport">Other portfolio Design<span
class="glyphicon glyphicon-chevron-right"></span></a></p>
</div>
</div>
</div>
</div><!--END OF CONTAINER-->
.bg-container{
margin-top:-5px;
background: url(../images/ContentBG.png);
}
.bg-line1{
margin-top: 0px;
padding-top:0px;
}
.bg-pattern-line2{
margin-left:-15px;
padding-top:610px;
}
thanks.
and here's some scripts, i forgot to include.
The different menu style is managed by javascript, specifically a jQuery plugin (collapse.js) your HTML structure is flawed from what i can see:
no head tag closure
no body tags
And of course no where in your code (snippets that you posted) have you included the necessary javascript files.