I want to make this mobile responsive
The button are overlaping
{%load static%}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Upload_Image</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
background: #7abecc !important;
}
.material-icons {
vertical-align: middle;
}
.container2{
padding-left: 40%;
}
.alert{
padding-left: 40%;
}
</style>
</head>
<body>
{% if user.is_authenticated%}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Image Captioning</a>
<i class="material-icons bg-light ">collections</i>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
</ul>
<span class="navbar-text">
WRITE CAPTION
Hi! {{ user.username }}
<i class="material-icons bg-dark mx-2 ">home</i>
<i class="material-icons bg-dark mx-3 ">logout</i>
</span>
</div>
</div>
</nav>
<div class="alert alert-success" role="alert">
<h1>Image Upload</h1>
</div>
<form method="post"action="/upload_save" enctype="multipart/form-data">
{%csrf_token%}
<div class="container"style="height:1000px;Max-width:100%;">
<div class ="container2" id ="images"><br>
<input type="button"class="btn btn-success cc"name="add_image" id ="add_image"value="Add Image">
<input type="submit"class="btn btn-success"value="Upload & Save Data"><br>
<!-- <input type="submit"class="btn btn-primary"value="Save Data"> -->
</div>
</form>
<script>
document.getElementById("add_image").onclick=function (ev) {
var image=document.getElementById("images");
var preview=document.createElement("img");
preview.style.width="300px";
preview.style.height="300px";
preview.style.marginTop = "20px";
preview.style.border = "thick solid #ffffff";
preview.style.borderRadius = "25px";
var newInput=document.createElement("input");
newInput.type="file";
newInput.name="file[]";
var br=document.createElement("br");
var br1=document.createElement("br");
newInput.onchange=function(ev1){
if(this.files && this.files[0])
{
var fileReader=new FileReader();
fileReader.onload=function(ev2){
preview.src=ev2.target.result;
};
fileReader.readAsDataURL(this.files[0])
}
};
image.appendChild(newInput)
image.appendChild(preview);
image.appendChild(br);
image.appendChild(br1);
}
</script>
{%else%}
<script type="text/javascript">
alert("Cant Access without Login");
window.location.href = "{%url 'login' %}"
</script>
{% endif %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>
This the code of my HTML file and i want to make it mobile responsive here the image preview option are going out of the screeen
i tried many things but nothing works so i have no idea what to do next how to resolve the issue
When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
Hi hacakaman79 just add below code on head style tag
#media only screen and (max-width: 767px){
form{
width : 100%;
margin : 0 auto;
clear : both;
}
.container2{
padding : 0;
margin : 0 auto;
}
}
Related
Whenever I'm scrolling my mouse, all the listed admin cards come over the navbar. This is a very irritating flaw and I can't seem to understand where I went wrong. Any help would be appreciated. Thanks!
#mainsec {
height: 100vh;
width: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#navv {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
#navv a:hover {
background-color: rgba(221, 221, 221, 0.568);
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="../../css/admin_dash.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navv">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="../../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top"> Phemesoft
</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">
<a class="nav-link active" aria-current="page" href="#sec1">Admins</a>
<a class="nav-link" href="#sec2">Manage Admins</a>
<a class="nav-link" href="#sec3">Course Content</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="column">
<div id="sec1">
<div class="row" id="mainsec">
<div class="col-sm-6">
<h2>Admins</h2>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-5 cards-wrapper"></div>
</div>
</div>
</div>
</div>
<div id="sec2">
<div class="row" id="mainsec">
<div class="col-sm-6">
<h1>User to Admin</h1>
</div>
<div class="col-sm-6">
<form class="form" action="makeadmin" method="POST">
Enter email:
<input type="email" placeholder="Email" name="email">
<button type="submit" class="btn btn-light">Check</button>
</form>
</div>
</div>
</div>
<div id="sec3">
<div class="col-sm-6" id="mainsec">
<h1>Add course content</h1>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$.ajax({
url: "listadmins",
type: "GET",
success: function(response) {
var $results = $(".cards-wrapper");
for (var a = 0; a < response.length; a++) {
// console.log(response[a].Name);
$results.append(
'<div class="card"><div class="card-body"><h6 class="card-title">' +
response[a].Name +
'</h6></div></div>'
);
}
}
});
</script>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navv").style.top = "0";
} else {
document.getElementById("navv").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
};
</script>
</body>
</html>
Here's an image of the issue:
The card appears over then nav bar
Ps: I haven't posted the mapping of /listadmins because it;s just normal Database query
Thanks all of guys for responding. I found the answer in one the comments. It was to use a higher z-index value for the navbar.
#navv {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
z-index: 2;
}
remove 'position: relative' from the card class
This has nothing to do with the ajax directly but more the rest of the page.
Your html is invalid
head tag not closed
body tag not opened
duplicate id mainsec - not using them really so I made them a class and removed the id's
some other invalid markup
Hard to see the issue here so I adjusted the size slightly for this site
Now that we got that strait, you can adjust the margins and padding on the tops with mt-5 pt-4 however you wish, toy around with this and see where you get things to move.
.mainsec {
height: 5em;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
}
#navv {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
transition: top 0.3s;
}
#navv a:hover {
background-color: rgba(221, 221, 221, 0.568);
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="../../css/admin_dash.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navv">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="../../assets/logo.png" width="30" height="24" class="d-inline-block align-text-top" alt="Phemesoft logo">
</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">
<a class="nav-link active" aria-current="page" href="#sec1">Admins</a>
<a class="nav-link" href="#sec2">Manage Admins</a>
<a class="nav-link" href="#sec3">Course Content</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="container mt-6">
<div class="">
<div id="sec1">
<div class="mainsec mt-5">
<div class="col-sm-3">
<h2>Admins</h2>
</div>
<div class="col-sm-7 mt-5 pt-4">
<div class="row">
<div class="col-sm-8 cards-wrapper">
<div class="cards-wrapper">
<div class="card">
<div class="card-body">
<h6 class="card-title">Pretend append
</h6>
</div>
</div>
<div class="card">
<div class="card-body">
<h6 class="card-title">Pretend append
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="sec2">
<div class="row mainsec">
<div class="col-sm-6">
<h1>User to Admin</h1>
</div>
<div class="col-sm-6">
<form class="form" action="makeadmin" method="POST">
Enter email:
<input type="email" placeholder="Email" name="email">
<button type="submit" class="btn btn-light">Check</button>
</form>
</div>
</div>
</div>
<div class="row" id="sec3">
<div class="col-sm-6 mainsec">
<h1>Add course content</h1>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$.ajax({
url: "listadmins",
type: "GET",
success: function(response) {
var $results = $(".cards-wrapper");
for (var a = 0; a < response.length; a++) {
$results.append(
'<div class="card"><div class="card-body"><h6 class="card-title">' +
response[a].Name +
'</h6></div></div>'
);
}
}
});
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navv").style.top = "0";
} else {
document.getElementById("navv").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
};
</script>
</body>
</html>
Trying to position the button that triggers the bootstrap collapse in a fixed position so it is always visible when the user is scrolling on the page. However the position of the content that is shown when the button is clicked does not change with the button position. How do I show the collapsed content in the same default collapse format after changing the button position?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<button style="position: fixed; top: 50% ;left: 50%", class="btn btn-primary" type="button" data-toggle="collapse" data-target="#butcollapse"
aria-expanded="false" aria-controls="butcollapse">
+
</button>
<div class="collapse" id="butcollapse">
<div class="card card-body">
hello
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<button style="position: fixed; top: 50% ;left: 50%", class="btn btn-primary" type="button" data-toggle="collapse" data-target="#butcollapse"
aria-expanded="false" aria-controls="butcollapse">
+
</button>
<div style="position: fixed; top: 75% ;left: 50%;" class="collapse" id="butcollapse">
<div class="card card-body">
hello
</div>
</div>
I'm trying to integrate the slide into my navigation. Here is the slide that I am trying to integrate.
Here is the code I'm working on and the website is rosannalui.com. I'm a bit stumped what I'm doing wrong and any help would be greatly appreciated. Thank you so much!
<html>
<head>
<title>Rosanna Lui</title>
<link href="https://fonts.googleapis.com/css?family=Lora:400" rel="stylesheet">
<link href="https://fonts.go``ogleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="style.css?v=1" rel="stylesheet">
<meta name="viewport" content="width=700">
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #9E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
</style>
</head>
———
<div class="container-fluid">
——
<body class="bodyhome">
<!-- Menu -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class='container-fluid'>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a class =“menuhello” href="#">Hello</a></li>
<li><a class =“menuwork” href=“#work”>Work</a></li>
<li><a class =“menucontact” href=“#contact”>Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<!-- Hello -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="hello" class="darkgray">
<div id="hellotext">
<h1>I'm Rosanna, a visual and UX designer, and I am passionate about making <span class="bluetext">delightful</span> experiences.</h1>
</div>
</div>
<!-- Dots -->
<script>
particlesJS.load('hello', 'particles.json', function() {
console.log('hello#rosannalui.com');
});
</script>
</div>
<div id="section2" class="container-fluid">
<!-- Work -->
<a name="work"></a>
<div class="grid">
<div class="work work1">
<a href="./bee/">
<h2>Bee Adventurous</h2>
<h3>Augmented Reality Game</h3>
</a>
</div>
<div class="work work2">
<a href="./husky">
<h2>Husky Checkout</h2>
<h3>Equipment Rental Application</h3>
</a>
</div>
<div class="work work3">
<a href="./chord">
<h2>Chordinate</h2>
<h3>Networking App for Musicians</h3>
</a>
</div>
<div class="work work4">
<a href="./design">
<h2>Design Work</h2>
<h3>Illustration and Design</h3>
</a>
</div>
</div>
</div>
<div id="section3" class="container-fluid">
<!-- Contact -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<a name="contact"></a>
<div class="lightgray contact content">
<img src="images/rosanna.png" style="margin-top: -3vw" />
<div>
<h3>Rosanna Lui</h3>
<p>
I am a recent Interactive Media Design graduate at the University of Washington. Inspired by my background as a daughter of immigrants, I believe that it is important to design with the user in mind and to create content that is accessible to everyone.
I am always looking for new projects and opportunities to collaborate with others.
</p>
<p>
Email me: hello#rosannalui.com
</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
</body>
</html>
For a quick and dirty solution use:
html{
scroll-behavior: smooth;
}
Note that not all browsers support this.
Another quick way is to use jump.js.
Add this to your head:
<script src="https://rawgit.com/jumpjs/jumpjs/master/dist/jumpjs.min.js"></script>
I have made a webpage - Campus Connect - Colleges. However, viewing this on mobile hides the button of the groups. And also, the buttons don't appear centered.
The whole page code is -
<!DOCTYPE html>
<html lang="en" hola_ext_inject="disabled">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link rel="stylesheet" type="text/css" href="fonts/glyphicons-halflings-regular.eot">
<title>Campus Connect</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.colorb:hover{
background-color: #F5D357 !important;
}
.colorb:active{
background-color: #F5D357 !important;
}
</style>
<!-- Custom styles for this template -->
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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]-->
</head>
<body style="background-image:url('images/bkg.jpg');background-size:cover;background-repeat:no-repeat;">
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" style="background-color:#383838;border:0;">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand" style="padding:0;"><img src="images/logo.png" style="width:200px;height:100%;" onClick="document.location.href='app_index.html';"></div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<!-- <ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul> -->
<ul class="nav navbar-nav navbar-right">
<li><a target="_blank" href="https://play.google.com/store/apps/details?id=com.campusconnect" style="color:#EBD07B;">Get the App</a></li>
<li><img src="images/android.png" class="img-responsive img-circle" alt="App" style="width:40px;height:40px;text-align:center;margin-top:5px;padding-top:5px;padding-bottom:5px;border: 2px solid #EBD07B;border-radius: 25px;"></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h2 id="coll_name" style="text-align:center;"></h2>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-1">
<div style="text-align:center;">
<span aria-hidden="true" style="font-size:50px;"><img src = "calendar.png"/></span>
</div>
<br/>
<div style="font-size:20px;">
<p style="text-align:center;" id="event_no"></p>
<p style="text-align:center;">Events Happening Today</p>
</div>
<button type="button" class="btn btn-info colorb" style="margin-left:30%;background-color:transparent;border-color:black;color:black;" onclick="location.href='calendar.html';"> Calendar</button>
</div>
<div class="col-md-3 col-md-offset-3">
<div style="text-align:center;">
<span aria-hidden="true" style="font-size:50px;"><img src = "groups.png"/></span>
</div>
<br/>
<div style="font-size:20px;">
<p id="group_no" style="text-align:center;"></p>
<p style="text-align:center;">Groups On Campus</p>
</div>
<button type="button" class="btn btn-success colorb" style="margin-left:30%;background-color:transparent;border-color:black;color:black;" onclick="location.href='groups.html';">Explore Groups</button></a>
</div>
</div>
</div>
<footer class="footer" style="background-color:#383838;height:100px">
<div class="container">
<div class="row" style="text-align:center;">
<img src="images/facebook_circle.png" style="width:40px;height:40px;margin-top:2px;">
</div>
<div class="row" style="text-align:center;color:white;">
<p>Copyright 2015 Campus Connect</p>
</div>
<div class="row" style="text-align:center;color:white;">
<p>Made with <img src="images/heart.png" style="height:20px;"> in Bangalore</p>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript">
function init(){
gapi.client.load('xxxx', 'v1',loaded, 'xxxxx');
}
function loaded(){
var col_name = localStorage.getItem('CollegeName');
var col_id = localStorage.getItem('CollegeId');
document.getElementById('coll_name').innerHTML = col_name;
gapi.client.clubs.getClubList({'college_id':col_id}).execute(function(resp) {
console.log("Here and there");
console.log(resp.result.list.length);
console.log("Done here");
document.getElementById('group_no').innerHTML= resp.result.list.length;
});
now_date = getDate();
gapi.client.clubs.collegeFeed({'collegeId':col_id,'date':now_date}).execute(function(resp){
console.log('Success');
console.log(resp);
var flag;
if (resp.result.length === undefined)
{
flag = 0;
}
else
{
flag = resp.result.length;
}
document.getElementById('event_no').innerHTML=flag;
});
function getDate()
{
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
today = yyyy+'-'+mm+'-'+dd;
//final_date = '"'+today+'"';
console.log(today);
return today;
}
}
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
</body>
</html>
What is the error? And how do I fix this ?
Your sticky footer is the culprit. In sticky-footer-navbar.css row 25, adding a third padding value of 100px will do the trick:
body > .container {
padding: 60px 15px 100px;
}
If I were you, I would get rid of the inline styling as well. You have added a text-align styling on all paragraphs instead of defining a rule in a stylesheet. Furthermore, you can make the buttons centered under the imaged by:
style: block;
margin: 0 auto;
Remove margin-left=30% from the inline styles of the buttons.
Add text-align: center to
the wrapping element.
I am using Bootstrap and I need two layouts for wide and boxed. And I want to easly toggle (change) between layouts when needed.
EDIT : How can I do like this : http://htmlstream.com/preview/unify-v1.7/
Beetween boxed and wide layout changing only in body class (boxed-layout container) I don't need switcher. I will put "boxed-layout container" class to body for boxed layout or I will remove boxed-layout container class from body for wide layout. But I can not do it with bootstap and need help for this.
How can I create wide and boxed layouts like following example images? And how can I change layout via class?
For example:
<html>
<head>
<style>
.main-wrapper-wide {
width: 100% !important;
}
.main-wrapper-boxed {
width: 850px !important;
box-shadow: 0 0 5px #ccc;
}
</style>
</head>
<body>
<div class="main-wrapper-wide or main-wrapper-boxed">
<!-- header content here !-->
<!-- slider here !-->
<!-- site content here !-->
<!-- footer content here start !-->
</div>
</body>
</html>
Do you just want the Navbar and the main containers to only be a max of 800px wide and then still be free to resize on all screens sizes.
If so then this is probably all you need.
Just use max-width:800px; and you also need to <center> the divs.
Here is a full size Fiddle.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.clear {
margin-top:60px;
margin-bottom:60px;
}
.block1 {
height: 440px;
margin-bottom:60px;
}
.block2 {
height: 200px;
}
.bg-clr {
background-color: blueviolet;
}
.bg-clr-blk {
background-color: black;
}
.section-max-width {
max-width:800px;
}
b {
color:black;
}
</style>
</head>
<body class="bg-clr">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container section-max-width">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<center>
<section class="section-max-width">
<div class="clear">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-primary block1">
<br>
The overall <b>Max Width</b> these containers and the navbar can be is <b>800px</b>.
<br>
They are still free the reduce in size when resized to fit smaller screen sizes.
<br>
Resize to see.
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-primary block2"></div>
</div><!-- /.container -->
<div class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-clr-blk clear"><br><br></div>
</section>
</center>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Take a look at this code snippet and try changing the main-wrapper-wide class to main-wrapper-boxed:
body {
background-color: #E5E5E5;
}
.container {
max-width: 850px;
border: solid 1px #6c757d;
padding: 10px;
margin-bottom: 10px;
}
.main-wrapper-boxed {
max-width: 850px;
margin: 0 auto;
padding: 10px;
background-color: #FF7777;
}
.main-wrapper-boxed .container-fluid {
padding-left: 0;
padding-right: 0;
}
.slider {
padding: 10px;
background-color: #CDCDCD;
}
.footer {
color: #fff;
padding: 10px;
background-color: #1C1C1C;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-wrapper-wide"> <!-- change class name to main-wrapper-boxed -->
<div class="container">
<div class="row header mx-0">
<div class="col-3">Logo</div>
<div class="col-8 offset-1">Header menu</div>
</div>
</div>
<div class="container-fluid slider">
<div class="container">Slider</div>
</div>
<div class="container">Site content</div>
<div class="container-fluid footer">
<div class="container">Footer</div>
</div>
</div>
These were the steps I took:
First of all, I created the page as you wanted in the Bootstrap wide example. This became the main-wrapper-wide version.
After that, I changed the class to main-wrapper-boxed and customized it for the Bootstrap boxed example by giving it max-width=850px.
Done!
Here's a Fiddle just in case...