I'm using Bootstrap v3.3.4.
I want to implement a footer in my web page. But, it doesn't work.
The code of my page:
<!DOCTYPE html>
<html>
<head>
<title>Web site</title>
<link href='css/main.css' rel='stylesheet'>
<!-- Library -->
<link rel="stylesheet" href="Bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="Bootstrap/bootstrap-theme.min.css">
<script src="Script/jquery.min.js"></script>
<script src="Script/bootstrap.min.js"></script>
</head>
<body>
<div class='container'>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 text-center">
<h2><b> My first web site!</b></h2>
<div style="padding-bottom: 10px;"></div>
</div>
</div>
<div class="row well">
<div class="col-md-6 col-sm-6 col-xs-6">
<p>This is my first web site, I'm trying to learn Bootstrap.</p>
<button type='button'>Take the Tour</button>
<button type='button'>Book Tickets Now</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<img src="Images/universe.jpg" alt="Blasting Off"/>
</div>
</div>
<div class="row well">
<div class="col-md-4 col-sm-4 col-xs-4">
<h3><b>I am 20 years old!</b></h3>
<p>I was born in 1994.</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<h3><b>I live in Rome!</b></h3>
<p>Rome is a beautiful city.</p>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<h3><b>I am a programmer!</b></h3>
<p>I am a front-end developer, I started to do this work recently.</p>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
</body>
NetBeans says Class footer not found
I have included bootstrap.min.css and bootstrap-theme.min.css
If I open the page with a browser (Chrome, im my case) the footer doesn't work..
Why? Thanks.
I'm assuming you're trying to import a footer from the twitter-bootstrap library. Unfortunately twitter-Bootstrap does not include a default CSS for a footer class. (It might do for the HTML-tag , but there is no class).
Depending on what kind footer you want to display there are some examples over at http://www.getbootstrap.com
For example:
http://getbootstrap.com/examples/sticky-footer/
Hope that helped you.
I don't know exactly what you are asking for but this may help.
If you want the footer to be fixed at bottom, then try adding this to your CSS code.
CSS:
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
I hope this will help you?
Related
I am new to web development and i am using pre-built template and the below code is showing like the blow image and I am trying to replace it but not able to do. how to replace the background image
<section id="cta" class="section">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12 align-self-center">
<h2>BLOGGER</h2>
</div>
</div>
</div>
</section>
This might help you :)
<html>
<head>
<style>
#cta{
background-image:url("Here input your image path..");
}
</style>
</head>
<body>
<section id="cta" class="section">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12 align-self-center">
<h2>BLOGGER</h2> <!-- you can just remove it..Since this is not background image but a heading-->
</div>
</div>
</div>
</section>
</body>
</html>
the background is set in css. need to know your css. you can try to overwrite the background .
.row {
background-image: url(image.jpg);
background-color: #c7b39b;
}
I am facing a problem with the Bootstrap-4 grid system. There are 12 columns, and whenever I use less than 12 columns, the rows are automatically centered. I want left alignment, how can this be fixed?
A snippet of my code:
<div class="row justify-content-start con-flex">
<?php foreach($books as $book):?>
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div id="single-book">
<div id="book-image">
<?php print '<img src = "'.strip_tags($book->book_image).'" alt = "">';?>
<div id="addto-cart"><i class="fas fa-shopping-cart"></i> Add to cart</div>
</div>
<div class="book-text">
<div id="book-name"><?= substr(htmlentities($book->book_name),0,21) ?></div>
<div id="author">By <i><?= htmlentities($book->author) ?></i></div>
<div id="price"><?= htmlentities($book->price) ?>.TK</div>
<div id="book-details">
<?php print 'View details'; ?>
</div>
</div>
</div>
</div>
<?php endforeach;?>
</div>
image of code:
enter image description here
According to Bootstrap doc that should solve your problem
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
content here...
</div>
<div class="col-4">
content here...
</div>
</div>
</div>
The code you have should be working fine, columns will be aligned left by default; maybe what you are seeing is the result of using .container instead of .container-fluid which uses the full width of the viewport. It's either this or you might have some custom CSS that's affecting the layout of the columns
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row ">
<div class="col-4 col-md-4 border">content here...</div>
<div class="col-4 col-md-4 border">content here...</div>
</div>
</div>
<div class="container-fluid">
<div class="row ">
<div class="col-4 col-md-4 border">content here...</div>
<div class="col-4 col-md-4 border">content here...</div>
</div>
</div>
This problem was for my other base CSS.
Instead of:
*{
margin: 0 auto;
}
For this margin: 0 auto; in my main style.css file My bootstrap's grids were not working properly. Now I remove this margin: 0 auto from *.
Now
I write
* {
margin: 0;
padding: 0;
}
Now my bootstrap grids are working properly
I'm learning Bootstrap, and I can't get the height attribute in v4 (e.g.: "row h-25") to work.
I've tried to add another CSS which sets the height of "container-fluid" as well as html and body to 100%, which someone proposed as a solution in another answer. Still doesn't work, I'm afraid. I'm using Visual Studio, and when I open "NuGet - Solution", it says that the bootstrap version is 'v4.0.0-alpha'.
Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/custom.css" rel="stylesheet" />
<script src="scripts/angular.min.js"></script>
</head>
<body>
<div class="container-fluid" style="background-color: #e7fdd6">
<div class="row h-25" style="background-color: #eee">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Customer</p><!-- These are just rough drafts while I learn the grid system. --></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Power</p></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Panels</p></div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Projects</p></div>
</div>
<div class="row h-25" style="background-color: #eee">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Customer-slider</p></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Power amount</p></div>
<div class="col-md-3 col-lg-3 hidden-xs hidden-sm"><p>Panels</p></div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"><p>Projects-slider</p></div>
</div>
<div class="row h-25">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><img src="Content/picture.jpg" alt="Park" align="middle" /> <!-- Bilde --></div>
</div>
<div class="row h-25">
<div class="col-lg-6 col-md-6-col-sm-12 col-xs-12"><!-- Graph 1 --></div>
<div class="col-lg-6 col-md-6 hidden-sm hidden-xs"><!-- Graph 2 --></div>
</div>
</div>
</body>
</html>
custom.css:
.container-fluid {
height: 100%;
}
html, body {
height: 100%;
}
Bootstrap 4 alpha works well with h-25 class.You have to set the height for the parent element i.e.,container-fluid in px,rem or em.Do not add parent height in percentage.
.container-fluid {
min-height: 200px ;
}
Best practise is to add styles to custom class in the parent element rather than applying the styles for bootstrap core classes.
The h- (like h-25) classes were introduced in Bootstrap Alpha v6, so you need to upgrade your Bootstrap version to use these.
It looks like your NuGet reference is an older alpha version of Bootstrap 4. The latest version, as of right now, is 4.0.0-beta2.
In the VS NuGet Package Manager (right-click the solution and choose "Manage NuGet Packages for Solution..."), you should see that there are updates to the package. If not, make sure the "Include prerelease" checkbox is checked.
I'm using bootstrap (version 3.3.6) for the first time to make my site. Readed the docs and start to code. Excluding the <link>'s the code below is my site's structure:
<body>
<div class="container">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2 col-lg-pull-1">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-sm-10 col-md-10 col-lg-10 col-lg-push-1">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
</div>
Using push and pull classes I thought I was removed padding for the columns. Setting the main div with 'class="container"' I have the result:
Changing to 'class="container-fluid"' the behavior remains strange. Notice shapes overlapping page:
What I want in my results is: the circle and rectangle (both are divs) remains aligned to the edges of the page (left and right) with no padding or marging. Following docs until now doesn't work. What this behavior occurs?
by default col-* have padding so you just need to reset them
[class^="col"] {
padding: 0
}
[class$="-2"] {
background: orange
}
[class$="-10"] {
background: grey
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="loader">
<div class="loader-bg">
...
</div>
</div>
</div>
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
<div class="black-box">
<p class="info-message">Coming <span>VERY</span> soon!</p>
<p class="text-message">Until then, my contacts:</p>
...
</div>
</div>
</div>
I am making a site for my high school robotics team and I am completely new to html and css. How come one of the columns (the member 10 one) is not functioning like the others?
It seems one of the columns is off center. I'm not sure exactly how to describe it but I can post an image if necessary.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Robotics Team</title>
<!-- Link to stylesheet -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/index1.css">
<!-- Mobile Scaling -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-------------------- UNIFORM CODE ------------------------->
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/Home">Team 3774</a>
</div>
<div class="navbar-collapse collapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Robot</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
<!-- Banner -->
<div id="top-jumbotron" class="jumbotron">
<img src="/Images/Banner.png" class="img-responsive" alt="Responsive image">
</div>
<!----------------------------------------------------------->
<div class="jumbotron">
<h1>Team Member Bio</h1>
<p>Here you can find links to every member with some information on each of them.</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="bubble">
<h2>Member 1 </h2>
<p>Team Captain, Engineer, Coder</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 2</h2>
<p>Head Engineer, Assistant Captain</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 3</h2>
<p>Head Coder, Head Web-master</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 4</h2>
<p>Coder, Head Documenter</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 5</h2>
<p>Engineer, Head 3D Modelling</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 6</h2>
<p>Coder, Web-master, Engineer</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 7</h2>
<p>Financial Advisor, Engineer</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 8</h2>
<p>Engineer, Documenter</p>
Read More
</div>
</div>
<div class="col-md-4">
<div class="bubble">
<h2>Member 9</h2>
<p>Engineer, Coder</p>
Read More
</div>
<div class="col-md-4">
<div class="bubble" id="special">
<h2>Member 10</h2>
<p>Secretary, Mascot</p>
Read More
</div>
</div>
</div>
</div>
</body>
</html>
#top-jumbotron
{
padding-left:0;
padding-right:0;
padding-bottom:0;
margin-bottom: 0;
}
body
{
background-color: #E8E8E8;
}
.bubble
{
background-color: #ffffff;
padding: 20px;
width: 95%;
height: 175px;
border-radius: 15px;
margin-top: 10px;
margin-bottom: 10px;
}
#special
{
float: left;
}
You're just missing a /div - I notice you have a div inside a div, remember you need to close both. I use Netbeans for html and it will tell you if there is a problem. If you are on a Mac, I am told Komodo is really good, too. A good editing program is a life saver!
Fixed code:
<div class="col-md-4">
<div class="bubble">
<h2>Mina Hanna</h2>
<p>Engineer, Coder</p>
Read More
</div>
</div> <!-- this one! -->
edit there are a few things wrong with the code and michael points one out - as he says, Bootstrap is a grid. So Imagine (I actually draw it usually) a box split into 12 columns. For every row div, you should only have columns that add up to 12 inside it. You can break this and it will often still work because the div will just overflow and move down, but it's not best practice. If fixing the missing div end tag doesn't work, try fixing the row structure so it only adds up to 12 columns across the page
You can have a layout like the one you specify, however it wont necessarily work per Bootstraps intended functionality, and as such its usually a good idea to follow their recommended row structure.
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Instead of
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
...
</div>
You should do, e.g:
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
Within a row, the sum of the numbers following the hyphen in each column definition should add up to 12.