I am trying to create a layout similar to this one where the different sections span the entire width of the screen. I was looking at the html/css for the layout and couldn't figure out why my view was not doing the same. (I am relatively new to creating pages).
I am using php to make creating the pages easier so I have a few files.
.jumbotron{
background: gray;
height: 50%;
margin-top: 10px;
}
.jumbotron p, h1 {
text-align: center;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.container #about {
background: blue;
height: 50%;
}
.container #me {
background: blue;
height: 50%;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="nav">
<li><a href="index.php">Home</li>
<li><a href="about.php">About</li>
<li><a href="contact.php">Contact</li>
</ul><!--END .nav-->
</div><!--END .wrapper-->
</div><!--END .header-->
<div class="container">
<div class="jumbotron">
<div class="container">
<h1>Example</h1>
<p>Example paragraph </p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="about">
<span class="name">ABOUT</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="more">
<span class="name">MORE</span>
</div>
</div>
</div>
</div>
</div> <!--END MAIN CONTAINER-->
</body>
</html>
The rows don't extend to the edge of the screen. The views are also not aligned. I know it is a lot to look at, but I could not find any resource online with an example, or a simple template for me to take a look at.
In Bootstrap you can put the 12 column grid in a .container or a .container-fluid. The first is used if you want to grid to span a maximum of 1170 pixels, the latter if you want it to span the entire screen. Both have a horizontal padding of 15 pixels on each side to keep its content have some distance from the edge of the screen. For text this is a good thing to have, however as you note it's nice if a background color or image does span the entire width.
If you take a look at the theme you linked (see http://ironsummitmedia.github.io/startbootstrap-freelancer/) you might notice that the .container and .container-fluid classes they use also don't span the entire width of the screen. They surround them with other elements, e.g. <section class="success" id="about">, on which they put a background color.
See this example where i've put a <section> with a .pink or .green background color around the containers:
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
P.S. in your example the <a> tags aren't closed with a </a> tag, plus the .container after the .jumbotron isn't closed.
The problem with extending rows is simple, add the following rule:
body {
margin: 0;
}
Related
I just learned coding world,,,, need some help please,,,
I want to make a display like this picture ..,
but I really don't know how ... I use br, but when it is applied to the mobile version, it gets messy,,,,
or can "while" or "do" make it look like in the picture ??
please help
this is my messy script
.crop {
width: 9%;
height: auto;
border:5px double;
overflow: hidden;
border-radius: 0px 20px;
float:left;
margin:0.3%;
}
<div class="crop">24</div>
<div class="crop">23</div>
<div class="crop">22</div>
<div class="crop">21</div>
<div class="crop">20</div>
<div class="crop">19</div>
<br><br>
<div class="crop">18</div>
<div class="crop">17</div>
<div class="crop">16</div>
<div class="crop">15</div>
<div class="crop">14</div>
<div class="crop">13</div>
<div class="crop">12</div>
<div class="crop">11</div>
<div class="crop">10</div>
<br><br>
<div class="crop">9</div>
<div class="crop">8</div>
<div class="crop">7</div>
<div class="crop">6</div>
<div class="crop">5</div>
<div class="crop">4</div>
<div class="crop">3</div>
<div class="crop">2</div>
<div class="crop">1</div>
Not quite sure what how it is supposed to behave on mobile. Are you looking for something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.wrapper {
display: flex;
}
.crop {
width: 9%;
height: auto;
border:5px double;
overflow: hidden;
border-radius: 0px 20px;
margin:0.3%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="crop">24</div>
<div class="crop">23</div>
<div class="crop">22</div>
<div class="crop">21</div>
<div class="crop">20</div>
<div class="crop">19</div>
</div>
<div class="wrapper">
<div class="crop">18</div>
<div class="crop">17</div>
<div class="crop">16</div>
<div class="crop">15</div>
<div class="crop">14</div>
<div class="crop">13</div>
<div class="crop">12</div>
<div class="crop">11</div>
<div class="crop">10</div>
</div>
</body>
</html>
I am building a simple website with bootstrap4 and I am trying to set a carousel as the background. Is there any simple way to do it without keyframes?
You can use bootstrap default carousel with some tweaks, namely the z-index and position attributes.
Image 1, 2 and 3 must be replaced by your own images, without them it will not work very well and the size adapted to your needs, you can also add indicators for the image and arrows cycle through images.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Carousel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
#demo{
position: absolute;
z-index: -1;
}
#frontpage{
color: red;
font-size: larger;
background-color: yellow;
opacity: 0.5;
padding: 50px;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Image1.jpg" alt="Image1" width="1920" height="1080">
</div>
<div class="carousel-item">
<img src="Image2.jpg" alt="Image2" width="1920" height="1080">
</div>
<div class="carousel-item">
<img src="Image3.jpg" alt="Image3" width="1920" height="1080">
</div>
</div>
</div>
<div id="frontpage">
My frontpage over the carousel
</div>
</body>
</html>
https://imgur.com/a/IhONUvY
here is a screenshot of my problem, there's 2 pie charts above each other, how do i make them go next to each other? I am using the google api for charts
Would this be a html or css edit? if so how would I go about changing where it is?
Im using SB admin 2 as a template, ive tried using tabs but im either not using them correctly or they're just not having it
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div id="top5os" style="width: 700px; height: 300px; background:red;"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div id="top5country" style="width: 700px; height: 300px; background:blue;"></div>
</div>
</div>
</div>
use css like
div.container{
align: right;
or
float: right;
}
if neither of those work you can say
div.container{
position: fixed;
and
left: 900px;
}
I'm learning PHP and I found useful tutorials online, so I'm trying to build my very first site in PHP. I have a problem with CSS implementation. I keep my tab with localhost always on so I dont have to run it every single time when I change something. Problem is, when I code some CSS it loads on my registration form, but when i refresh the page, it's like I never coded CSS for that page. (sorry for bad english I hope You guys understand what I wanted to say..)
Here's the signup.php code :
<div class="container">
<div class="row" style="text-align:center;">
<h3>EPO - Sistem - Registracija </h3>
</div>
<div class="row sub_msg">
<p> Veb aplikacija za evidenciju predispitnih obaveza. </p>
</div>
<div class="row signup">
<div class="row">
<h3> Dobrodosli, molimo Vas, unesite podatke za registraciju. </h3>
</div>
<form action="" method="post" class="form-horizontal">
<div class="row form-group input_group">
<label for="" class="col-sm-2" >E-mail:</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control">
</div>
</div>
<div class="row form-group input_group">
<label for="" class="col-sm-2" >Firstname:</label>
<div class="col-sm-10">
<input type="text" name="firstname" id="firstname" class="form-control">
</div>
</div>
<div class="row form-group input_group">
<label for="" class="col-sm-2" >Lastname:</label>
<div class="col-sm-10">
<input type="text" name="lastname" id="lastname" class="form-control">
</div>
</div>
<div class="row form-group input_group">
<label for="" class="col-sm-2" >Password:</label>
<div class="col-sm-10">
<input type="password" name="password" id="password" class="form-control">
</div>
</div>
<div class="row form-group" style="margin:0px 10px 20px 10px">
<div class="col-xs-12">
<input type="submit" name="submit" id="Registruj se" class="form-control">
</div>
</div>
</form>
</div>
</div>
And here's the Index page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EPO - Pocetna stranica</title>
<!-- 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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href=" ./css/custom.css">
</head>
<body>
<nav class="navbar" style="background-color: #c40707">
<div class="container">
<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>
<a class="navbar-brand crud" style="color: darkgray !important" href="#">EPO Aplikacija</a>
</div>
</div>
</nav>
<div class="container">
<ul class="nav nav-tabs">
<li><a data-toggle='tab' href="#index">Pocetna stranica</a></li>
<li><a data-toggle='tab' href="#login">Ulogujte se</a></li>
<li><a data-toggle='tab' href="#signup">Prijavite se</a></li>
</ul>
<div class="tab-content">
<div id="index" class="tab-pane fade in">
<p>Index</p>
</div>
<div id="login" class="tab-pane fade in">
<p>Login</p>
</div>
<div id="signup" class="tab-pane fade in">
<?php include("./user/signup.php"); ?>
</div>
</div>
</div>
</body>
</html>
And here's the css code:
body{
background-color: darkgray;
font-size: 22px;
margin: 0;
padding: 0;
}
.crud{
width:auto;
color: #605d5d !important;
font-size: 25px;
font-weight: 800;
}
.sub_msg{
text-align: center;
padding: 10px 0px 20px 0px;
}
.signup{
border: 1px solid #c40707;
text-align: center;
width: 60%;
height: auto;
margin: auto;
}
.input_group{
margin: 0px 20px 20px 20px;
}
.input_group input{
height: 40px;
font-size: 20px;
}
input[type="submit"]{
height: 40px;
font-size: 20px;
font-weight: bold;
background-color: #c40707;
color: #605d5d !important;
}
I'm stuck her for over two hours, and I'm pretty sure it's some beginners silly mistake but I can't find it..
Correct the path of from <link rel="stylesheet" href=" ./css/custom.css"> to <link rel="stylesheet" href="./css/custom.css">
If still not work then force your browser to refresh the stylesheet.
Check by adding version number like
<link rel="stylesheet" type="text/css" href="./css/custom.css?version=51">
In the code below href attribute has unneeded space in it.
<link rel="stylesheet" href=" ./css/custom.css">
Should be:
<link rel="stylesheet" href="./css/custom.css">
Also sometimes you may need to clear cache for the changes in your css to appear.
In this case, cause it can become tiresome pressing the refresh button, rather than do a refresh, I add a random value at the end of the css url to make it appear like a new url so no caching will happen.
Like
<link rel="stylesheet" href="./css/custom.css?<?php echo rand(1,300);?>">
Try to change this line (assuming that your css folder in in the same level as you index.php)
<link rel="stylesheet" href=" ./css/custom.css">
To this this
<link rel="stylesheet" href="css/custom.css?t=<?php echo time(); ?>">
Remove the <?php echo time(); ?> once you go on production as it meant on for development so you don't need to clear the cache or the hard reload if the changes in your css are not reflected in the browser.
I am trying to implement the sticky footer for bootstrap but it is not working for me. I have a header.php and a footer.php which I include in every page of my website. I saw a various posts here for the sticky footer but it doesn't seem to work for me. I saw an example to add a and a to the body of my page and modify the css accordingly but it doesnt seem to work. Please find my code below:
webpage.php
<?php
require_once "../includes/essentials.php";
include "../includes/header.php";
?>
<div id="wrap">
<div id="main" class="container">
Content
<?php include "../includes/footer.php"; ?>
</div>
</div>
Footer.php
<html>
<body>
<div class="footer">
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
Content
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
Content
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
Compatible with Firefox and Chrome.
</div>
</div>
</div>
</div>
</body>
</html>
style.css
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
.wrap {
min-height: 100%;
margin: 0 auto;
min-width: 1000px;
}
.main {
overflow:auto;
padding-bottom:200px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
bottom:0;
}
How do i fix this? I want the footer to stick at the bottom of the page even if content gets over before half of the webpage.
In the CSS you select .main as a class but in the html you've put is as an ID <div id="main">.
Secondly the <div class="footer"> should be outside of #wrap, as a sibling and not a child.
<div id="wrap">
<div id="main">
// <div id="contnainer"...
</div>
</div>
<div class="footer">
// <div id="contnainer"...
</div>
A quick fix to your problem is to use a NavBar as a footer, and simply fill it with the content you'd like in it.
Bootstrap Components provides the JS for the NavBar to stick to the top or bottom of the screen.
You can read about it here