I'm building a website with bootstrap and this is going to be the footer for the page. I got it from the bootstrap docs and changed it.
As of now, it is not 100% and I can't figure out what class is making it have a margin.
Here's the code:
<div class="container bg-warning border border-5 border-dark mt-3">
enter code here`<footer class="py-2 my-2">
<ul class="nav justify-content-center border-bottom pb-3 mb-3 border-dark">
<li class="nav-item">Homepage</li>
<li class="nav-item">Contact us here</li>
</ul>
<p class="text-center text-dark fw-bold">© copyright filler</p>
</footer>
</div>
Remove the container class and the mt-3 class on the first div.
Like so:
<div class=" bg-warning border border-5 border-dark">
enter code here`<footer class="py-2 my-2">
<ul class="nav justify-content-center border-bottom pb-3 mb-3 border-dark">
<li class="nav-item">Homepage</li>
<li class="nav-item">Contact us here</li>
</ul>
<p class="text-center text-dark fw-bold">© copyright filler</p>
</footer>
</div>
If you wanted that margin on the top, just add the mt-3 class again.
use container-fluid class instead of container class
Related
*Here is the code. With this code listing is done vertically.Here is the current output I want to make this vertically.
*This is the current code I written.
{% extends 'index.html' %}
{%block body_block%}
{%for p in carslist%}
<section class="py-5">
<div class="container px-4 px-lg-5 mt-2">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="{{p.carpic.url}}" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">{{p.carcompany}}</h5>
<p>{{p.carmodel}}</p>
<!-- Product price-->
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Price: {{p.carprice}}</li>
<li class="list-group-item">Kms: {{p.carkms}}</li>
</ul>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View Details</a></div>
</div>
</div>
</div>
</div>
</div>
</section>
{%endfor%}
For the parent element of each of your products, you need to write the properties: display: flex;
flex direction: row;
flex-wrap: wrap;
In tailwind - flex flex-row flex-wrap
simply remove all the row-cols classes and things should stack up vertically by default.
Classes to remove: row-cols-2 row-cols-md-3 row-cols-xl-4.
When you have a lot of cluttered html like that and you can't make sense of it anymore I find that the best way to go about it is to reduce the structure to the very minimum, and build from there.
Comment your code and rebuild it little step by little step. Then you can see the impact of each individual element or class that you add.
I'm modifying a CSS template based on bootstrap, in order to obtain a responsive simple website.
The page provides a list of events. Since show_date and show_shop have fixed width, when the website is opened on a smartphone (smaller screen) the class flex-row allows the show_name and show_location to be disposed in column to save space.
The problem is that when the text in show_name and show_location is too long, the text wrap out of the box in vertical.
How can I force the text in show_name and show_location to use only a single line (one for each one), truncating the text with ...?
I tried overflow: hidden with text-overflow: ellipsis but it doesn't work (I think due to the flex width of the div).
Thanks for help.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="col-lg-8 order-lg-1 order-2 shows_list_col">
<div class="shows_list_container">
<ul class="shows_list">
<li class="d-flex flex-row align-items-center justify-content-start">
<div>
<div class="show_date">18/07</div>
</div>
<div class="show_info d-flex flex-md-row flex-column align-items-md-center align-items-start justify-content-md-start justify-content-center">
<div class="show_name">Electric Castle Festival</div>
<div class="show_location">Cluj, Romania</div>
</div>
<div class="ml-auto">
<div class="show_shop trans_200">Buy Tickets</div>
</div>
</li>
<li class="d-flex flex-row align-items-center justify-content-start">
<div>
<div class="show_date">20/07</div>
</div>
<div class="show_info d-flex flex-md-row flex-column align-items-md-center align-items-start justify-content-md-start justify-content-center">
<div class="show_name">Ultra Music Festival</div>
<div class="show_location">Miami, USA</div>
</div>
<div class="ml-auto">
<div class="show_shop trans_200">Buy Tickets</div>
</div>
</li>
<li class="d-flex flex-row align-items-center justify-content-start">
<div>
<div class="show_date">25/08</div>
</div>
<div class="show_info d-flex flex-md-row flex-column align-items-md-center align-items-start justify-content-md-start justify-content-center">
<div class="show_name">Vikings Festival</div>
<div class="show_location">Oslo, Norway</div>
</div>
<div class="ml-auto">
<div class="show_shop trans_200">Buy Tickets</div>
</div>
</li>
</ul>
</div>
</div>
You could simply use the text-nowrap class on those divs and use spans inside. I've also removed some redundant div elements and combined classes.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="col-lg-8 order-lg-1 order-2 shows_list_col">
<div class="shows_list_container">
<ul class="shows_list">
<li class="d-flex flex-row align-items-center justify-content-start">
<div class="show_date mr-3">18/07</div>
<div class="show_info text-nowrap">
<span class="show_name">Electric Castle Festival</span>
<span class="show_location">Cluj, Romania</span>
</div>
<div class="show_shop trans_200 ml-auto">Buy Tickets
</div>
</li>
<li class="d-flex flex-row align-items-center justify-content-start">
<div class="show_date mr-3">20/07</div>
<div class="show_info text-nowrap">
<span class="show_name">Ultra Music Festival</span>
<span class="show_location">Miami, USA</span>
</div>
<div class="show_shop trans_200 ml-auto">Buy Tickets</div>
</li>
<li class="d-flex flex-row align-items-center justify-content-start">
<div class="show_date mr-3">25/08</div>
<div class="show_info text-nowrap">
<span class="show_name">Vikings Festival</span>
<span class="show_location">Oslo, Norway</span>
</div>
<div class="show_shop trans_200 ml-auto">Buy Tickets</div>
</li>
</ul>
</div>
</div>
Since show_date and show_shop have fixed width
You can easily achieve this with some few lines of CSS
#media (max-width: 767.98px){
.show_info {
width: calc(100% - 50px - 70px); /* where 50px and 70px are the width of .show_date and .show_shop respectively */
}
.show_name, .show_location {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
I've solved my problem following the bootstrap's way.
I can obtain the best result adding the class text-truncate to the classes show_info, show_name, and show_location.
Thanks for help!
This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 2 years ago.
I'm trying to center the area holding the Fitness Assessmeent Pre-Test. Any ideas on why I can't get it to center will be much appreciated.
Here is a fiddle:
https://jsfiddle.net/bigtime/ofcgphrm/
Here is a screenshot from my pc:
Here is a screenshot from my phone:
<section class="alert alert-success" role="region" aria-label="Activity Information" style="color: #458bc4;">
<div class="row">
<div class="col-sm-12">
<div class="card-box p-3">
<div class="row">
<div class="col-md-6 col-sm-6 my-auto">
<div class="py-3 border-right text-center">
<h3 class="mt-1 text-primary fw-bolder"><em class="text-primary fw-bolder mdi mdi-calendar-text"></em> 98.6%</h3>
<p class="text-muted">Current Activity Grade</p>
</div>
</div>
<div class="col-md-6 col-sm-6 my-auto">
<div class="text-center py-3 d-flex justify-content-center ">
<ul>
<li class="list-group-item text-primary fw-bolder">Fitness Assessment Pre-Test:<br>
<em class="text-primary mdi mdi-thumb-up-outline"></em> Completed </li>
<li class="list-group-item text-primary fw-bolder">Fitness Assessment Post-Test:<br>
<em class="text-primary fw-bolder mdi mdi-thumb-up-outline"></em> Completed </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--end row -->
</section>
There is a padding-left set to ul. You can remove that padding:
<ul class="pl-0">
<li class="list-group-item text-primary fw-bolder">Fitness Assessment Pre-Test:<br>
<em class="text-primary mdi mdi-thumb-up-outline"></em> Completed
</li>
<li class="list-group-item text-primary fw-bolder">Fitness Assessment Post-Test:<br>
<em class="text-primary fw-bolder mdi mdi-thumb-up-outline"></em> Completed
</li>
</ul>
Navbar Mobile View I'm not sure if i deleted code but i cant seem to figure out why my links to pages aren't working (i know basic coding so please be kind :D) (also added screenshot of what it looks like, so the links work on the desktop view but nothing happens on mobile view upon clicking)
My code for the navbar:
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="website-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="container2">
<div class="row align-items-center">
<div class="col-5 col-xl-2">
<h1 class="h2 site-header-logo">
<a href="Index.html" class="site-header-logo-image">
<imgsrc="images/Logo10Jul.png">
</a>
</h1>
</div>
<div class="col-12 col-md-10 d-none d-xl-block">
<nav class="navbar-nav site-navigation position-relative text-right"
role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li>Home</li>
<li>About Us</li>
<li>Felt Creations</li>
<li>Soothers</li>
<li>How to Order</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="col-6 d-inline-block d-xl-none ml-md-0 py-3" style="position: relative;
top:3px;">
<a href="#" class="site-menu-toggle js-menu-toggle text-black float-right">
<span class="icon-menu h3"></span>
</a>
</div>
</div>
</div>
</header>
I know this question was probably asked some hundred times, but sadly no answer that I found in here really helped me.
I tried these answers for example:
Bootstrap footer not at bottom
Flushing footer to bottom of the page, twitter bootstrap
Height not 100% on Container Fluid even though html and body are
But I still have the problem that when my page content is to "small" and doesn't fill out the whole height of the body/page container the footer just floats somewhere above the end of the browser window.
This is the code for my footer:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<footer class="d-flex justify-content-center">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
</div>
</footer>
I'm using Bootstrap 4.1 and Chrome, here's also a codepen to my site:
https://codepen.io/anon/pen/oMZVxq
Note: you have to use the sidebar view in codepen to actually see that the footer is not at the bottom, as the view size in codepen is so small that it looks correctly.
You can use built-in bootstrap class to achieve this.
What you need is the container to be a column flex container . class to use are : d-flex flex-column
To set the container to height:100% you can apply the class h-100to html, body and the container or add to the container style height:100vh;
For the footer, a margin-top:auto will do, the class to use is : mt-auto;
example below to run in full page mode
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<html class="h-100">
<body class="h-100">
<!-- Page Container -->
<div id="page-container" class="container-fluid pr-0 pl-0 h-100 d-flex flex-column">
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light bg-light pt-3 pb-3 d-flex justify-content-center">
<div class="col-md-8 col-lg-8 col-sm-12 col-xs-12 d-flex justify-content-between">
<div class="d-flex justify-content-start align-items-center">
<a href="/" class="kf-links">
<span class="h5">
<i class="fas fa-paper-plane"></i>
<span class="h4 font-weight-bold kf-dark">
MyPage
</span>
</span>
</a>
</div>
<!-- Main Header Navigation -->
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
Link1
</li>
<li class="nav-item">
Link2
</li>
<li class="nav-item">
Link3
</li>
</ul>
</div>
<!-- END Main Header Navigation -->
</div>
</nav>
<!-- END Header -->
<!-- Main Container -->
<div style="background:#5c90d2">
<div class="col-md-12 text-center pt-5 pb-5">
<div class="pt-5 pb-5">
<h1>
<span class="main-text">
Login
</span>
</h1>
<p class="lead"><span class="main-text">
Login Now!
</span></p>
</div>
</div>
</div>
<!-- Content -->
<div class="d-flex justify-content-center fadeIn">
<div class="col-md-8 col-xs-12">
<div class="d-flex justify-content-center">
<div class="col-md-6 pt-5 pb-5 pr-0 pl-0">
<form class="form-horizontal" method="post">
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_username">E-Mail</label>
<input id="id_username" class="form-control" maxlength="254" name="username" value="" type="text" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="">
<label for="id_password">Password</label>
<input id="id_password" class="form-control" name="password" type="password" required>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<small class="float-right">
Forgot Password?
</small>
</div>
</div>
<div class="form-group mt-5">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 pl-0">
<button class="btn btn-sm btn-block btn-primary" type="submit">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END Content -->
<!-- END Main Container -->
<!-- Footer -->
<footer class="d-flex justify-content-center mt-auto">
<div class="d-flex justify-content-between col-md-8 col-md-offset-2 mb-3 mt-5">
<!-- Copyright Info -->
<div class="align-left">
<a class="font-weight-bold small kf-blue kf-links" href="#">Link1</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link2</a> |
<a class="font-weight-bold small kf-blue kf-links" href="/">Link3</a>
</div>
<div class="align-right small">
Crafted with Love by <a class="font-weight-bold kf-blue kf-links" href="#" target="_blank">Me</a>
</div>
<!-- END Copyright Info -->
</div>
</footer>
<!-- END Footer -->
</div>
<!-- END Page Container -->
</body>
</html>
codepen updated https://codepen.io/anon/pen/PBpgNN
reminder for boostrap classes https://getbootstrap.com/docs/4.5/utilities/flex/ about sizing see https://getbootstrap.com/docs/4.5/utilities/sizing/
If you want a fixed footer, just add the class fixed-bottom to the footer tag like shown below.
<footer class="fixed-bottom bg-dark">
<div class="text-center">
<p>Footer</p>
</div>
</footer>
First add display: flex; and flex-direction: column; to #page-container.
Now you have "set the stage" for aligning the footer to the bottom. Set its margin-top to auto (by adding the class mt-auto) and you are done;
<div class="d-flex justify-content-center mt-auto">
Content here
</div>
See this codepen.
So this helped me - if someone is still looking for an answer:
on your <HTML>, <body> and your container div add a class h-100 and your footer will stay on the bottom.
Important
One thing I did to remove the extra height is that on my container div I changed the h-100 styling to height: calc(100% - 200px) !important; (where -200px was the height of my navigation and footer)
if you are not using the bootstrap, here is the styling .h-100{height:100% !important}