I'm using bootstrap and I'm getting free space at the very left and right of my div instead
of
taking up the entire screen it looks like it's only taking up 99%
MY CODE:
#social-links {
background-color : #242424;
/* border : .5px solid white; */
text-align : center;
color : white;
margin-bottom : -16px;
margin-top : -9px;
margin-left : 0px;
}
#social-links a {
color : white;
display : block;
width : 100%;
padding : 2px;
}
#social-links a:hover {
transition : 3s;
background-color : white;
color : black;
text-align : center;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container-fluid border p-0 m-0 no-border">
<div class="row p-0 m-0">
<div class="col-4 p-0 mx-0 " id="social-links">
Discord
</div>
<div class="col-4 p-0 mx-0 " id="social-links">
Instagram
</div>
<div class="col-4 p-0 mx-0 " id="social-links">
Twitter
</div>
</div>
</div>
The apparent white-space comes from the default margin on the body element.
Also ~ you are using an ID three times, when an ID is unique to one HTML element. I changed social-links to a class.
.social-links {
background-color: #242424;
/* border: .5px solid white; */
text-align: center;
color: white;
margin-bottom: -16px;
margin-top: -9px;
margin-left: 0px;
}
.social-links a {
color: white;
display: block;
width: 100%;
margin: auto;
padding: 2px;
}
.social-links a:hover {
transition: 3s;
background-color: white;
color: black;
text-align: center;
}
body {
margin: 0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container-fluid border p-0 m-0 no-border">
<div class="row p-0 m-0">
<div class="col-4 p-0 mx-0 social-links">Discord
</div>
<div class="col-4 p-0 mx-0 social-links">Instagram
</div>
<div class="col-4 p-0 mx-0 social-links">Twitter
</div>
</div>
</div>
Edit ~ add body { margin: 0;} to remove the default margin on the body element.
i fixed it the problem was with class row margin and padding
FIXED:
Discord
Instagram
Twitter
Related
As you can see in the image provided, if i try to resize the webpage, the "read more" anchors/buttons are also moving. is there a way to make their respective places to remain unchanged upon resizing web-screen? i also tried position fixed.
This is the only code used with regards to the issue, i am using bootstrap with little css.
<section class="second-section">
<div class="container-fluid">
<div class="row text-center">
<div class="col-md bg-white border">
<div class="card-1 text-left ">
<h1>Business <span>Mentoring</span></h1>
<p>Our mentors are leading professional and experts in their field with a passion....</p>
Read more
</div>
</div>
<div class="col-md bg-white border">
<div class="card-2 text-left">
<h1>Business <span>Coaching</span></h1>
<p>Our coaches are successful professional and leaders in their field, who ....</p>
Read more
</div>
</div>
<div class="col-md bg-white border">
<div class="card-3 text-left">
<h1>Personal <span>Mentoring</span> and coaching</h1>
<p>is where have professionals ready to work with a family,...</p>
Read more
</div>
</div>
<div class="col-md bg-white border">
<div class="card-4 text-left">
<h1>Career <span>exploration</span></h1>
<p>Career advice and exploration is vital if you want to maximise your potential in today's....</p>
Read more
</div>
</div>
</div>
</div>
</section>
.card-1 .card-2 .card-3 .card-4 h1{
width: 100%;
font-size: 40px;
line-height: 50px;
font-family: "Montserrat Bold";
}
.card-1 h1 span{
display: block;
}
.card-1 .card-2 .card-3 .card-4 p{
width: 100%;
max-width: 325px;
font-size: 16px;
color: #232020;
line-height: 28px;;
font-family: "Montserrat Regular";
}
.second-section p{
margin: 0;
}
.readMore-anchor{
width: 100%;
height: 47px;
font-size: 16px;
max-width: 161px;
line-height: 50px;
padding: 15px 38px;
background-color: #8cd9f9; ;
}
Had this same issue awhile back and here is how I solved it (although there may be other ways):
Add position relative to the four container cards (note that this is not for the cards, it is for the buttons). In your example this would be the div which has the common class bg-white. Also add a padding to the bottom of the container cards that creates a space for the buttons to float in when we position them.
.bg-white {
position: relative;
padding-bottom: 60px;
}
Absolute position the buttons within the space we just created.
.bg-white > .text-left > .readMore-anchor {
position: absolute;
right: 10px;
bottom: 10px;
}
You should end up with something like this, where the white space between the text and the buttons will automatically adjust to match the card with the most text, keeping it uniform. (I didn't finish making mine quite as pretty as yours but I believe it has the functionality you are looking for).
.card-1 .card-2 .card-3 .card-4 h1{
width: 100%;
font-size: 40px;
line-height: 50px;
font-family: "Montserrat Bold";
}
.card-1 h1 span{
display: block;
}
.card-1 .card-2 .card-3 .card-4 p{
width: 100%;
max-width: 325px;
font-size: 16px;
color: #232020;
line-height: 28px;;
font-family: "Montserrat Regular";
}
.second-section p{
margin: 0;
}
.readMore-anchor{
width: 100%;
height: 47px;
font-size: 16px;
max-width: 161px;
line-height: 50px;
padding: 15px 38px;
background-color: #8cd9f9; ;
}
.bg-white {
position: relative;
padding-bottom: 60px;
}
.bg-white > .text-left > .readMore-anchor {
position: absolute;
right: 10px;
bottom: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
<section class="second-section">
<div class="container-fluid">
<div class="row text-center">
<div class="col-md bg-white border">
<div class="card-1 text-left ">
<h1>Business <span>Mentoring</span></h1>
<p>Our mentors are leading professional and experts in their field with a passion....</p>
Read more
</div>
</div>
<div class="col-md bg-white border">
<div class="card-2 text-left">
<h1>Business <span>Coaching</span></h1>
<p>Our coaches are successful professional and leaders in their field, who ....</p>
Read more
</div>
</div>
<div class="col-md bg-white border">
<div class="card-3 text-left">
<h1>Personal <span>Mentoring</span> and coaching</h1>
<p>is where have professionals ready to work with a family,...</p>
Read more
</div>
</div>
<div class="col-md bg-white border">
<div class="card-4 text-left">
<h1>Career <span>exploration</span></h1>
<p>Career advice and exploration is vital if you want to maximise your potential in today's....</p>
Read more
</div>
</div>
</div>
</div>
</section>
add this to your existing css
.readMore-anchor{
position :absolute;
bottom:2%;//according to your need//
left:2%;//according to your need//
}
.container{
position :relative;
}
**wrap this anchor tag( with class readMore-anchor) around a div class container **
This is My Format right now on phone/dekstop
++img++ ++Title++
++SNIPPET++
I want to create it in such a way that it looks like this on phone
++img++
++Title++
++Snippet++
This is how i want to design in the card but i don't know how
This is The HTML code I am making this project on django so ignore this part {}
{% for post in object_list %}
{% if post.header_image %}
<div class="container-fluid col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10 " onclick="location.href='{%url 'article-details' post.pk %}';" style="cursor: pointer;">
<div class="row">
<div class="col-12 mt-3">
<div class="card ">
<div class="card-horizontal">
<div class="img-square-wrapper col-sm-4">
<img class="responsive" src="{{post.header_image.url}}" alt="Card image cap">
</div>
<div class="card-body">
<h4 class="card-title"> {{post.title}}</h4>
<p class="card-text">{{post.snippets}}</p>
</div>
</div>
<div class="card-footer">
<small class="text-muted">{{post.post_date}}</small>
</div>
</div>
</div>
</div>
</div>
{%endif%}
{% endfor %}
THIS the CSS part I have been trying all sorts of thing but its not happening, I dont know know what to do.
.item{
margin: auto;
padding:auto;
}
.flex-container-center {
justify-content: center;
}
.text{
padding: 5px;
text-align: center;
color: black;
}
.text2{
color: black;
}
.list-col *{
padding-top: 5px;
margin-left: 10px;
margin-right: 10px;
outline: 5px black;
}
.card-horizontal {
display: flex;
flex: 1 1 auto;
}
.card-horizontal:hover{
border: 1px solid #777;
}
img {
border: 1% solid #ccc;
display: block;
margin-left: 10%;
width: 100%;
height: auto;
}
img:hover{
border: 1% solid #777;
}
.responsive{
width: 100%;
height: 300px;
object-fit: cover;
object-position: bottom;
}
Rendered in desktop:
Rendered on Mobile:
Can anyone help me to understand what is wrong with my code?
Here It is, I removed unnecessary classes from styles.
Used col-md-4 and w-100
.item{
margin: auto;
padding:auto;
}
.flex-container-center {
justify-content: center;
}
.text{
padding: 5px;
text-align: center;
color: black;
}
.text2{
color: black;
}
a{
text-decoration: none !important;
}
.list-col *{
padding-top: 5px;
margin-left: 10px;
margin-right: 10px;
outline: 5px black;
}
.card:hover{
border: 1px solid #777;
}
img:hover{
border: 1% solid #777;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container-fluid col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10 " onclick="location.href='#';" style="cursor: pointer;">
<div class="row">
<div class="col-12 mt-3">
<div class="card ">
<div class="card-horizontal row">
<div class="img-square-wrapper col-md-4">
<img class="w-100" src="https://via.placeholder.com/150C/O" alt="Card image cap">
</div>
<div class="card-body">
<a href="#">
<h4 class="card-title"> Title</h4>
</a>
<p class="card-text">Lorem Epsum</p>
</div>
</div>
<div class="card-footer">
<small class="text-muted">11-02-2021</small>
</div>
</div>
</div>
</div>
</div>
There's a Bootstrap class for making images responsive: img-fluid.
Put this class in your img tag, and it should work without having to use other classes to make it look as you want.
Refer to: https://getbootstrap.com/docs/5.0/content/images/#responsive-images.
This link is for Bootstrap 5, but it works the same in Bootstrap 4.
How to make the text centered in middle of a button as image below? I have applied class below but it's not working.
<div class="row text-center">
<div class="col-lg-6 align-items-center">
Home Product
</div>
<div class="col-lg-6 justify-content-center">
Mobile Product
</div>
</div>
.btn-outline-index {
color: #c76626;
background-color: transparent;
background-image: none;
border: 4px solid #c76626;
font-weight: 400;
border-radius: 50px;
height:150px;
width:400px;
}
You just need to add display: flex;align-items: center; justify-content: center; to your buttons CSS. You can learn more about the flexbox layout from the below link.
https://www.w3schools.com/css/css3_flexbox.asp
#import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.btn-outline-index {
color: #c76626;
background-color: transparent;
background-image: none;
border: 4px solid #c76626;
font-weight: 400;
border-radius: 50px;
height:150px;
width:400px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="row text-center">
<div class="col-lg-6 align-items-center">
Home Product
</div>
<div class="col-lg-6 justify-content-center">
Mobile Product
</div>
</div>
I hope this helps.
With Bootstrap 4 I would like to have a row, which fills up the remaining height of the page, but the content of it should not extend the height over the place given. The content should be scrollable by buttons, the scrollbar at best should not be visible.
I tried to break down my layout to this. Please feel free to correct - this is really not my strong suit.
JSFiddle
HTML:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="/library/bootstrap-4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/library/fontawesome-5.0.10/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="/css/screen/presentation.css"/>
<title>Test</title>
</head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid d-flex h-100 flex-column">
<div class="row">
<div class="col">
<i class="fas fa-bars fa-3x"></i>
</div>
</div>
<div class="container h-100 flex-column d-flex">
<div class="row">
<div class="col headline-col bg-warning">
<h5 class="align-middle">Headline 1</h5>
</div>
</div>
<div class="section-div h-100 flex-column d-flex">
<div class="row bg-success">
<div class="col">
<h5>Subtitle 1</h5>
</div>
</div>
<div class="row flex-fill bg-danger d-flex">
<div class="col">
<h5>Subtitle 2</h5>
<p>
This should fill the remaining height, but the content should not use more space than available.
So it should be scrollable, best without scrollbar and scrolling by buttons
</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col last-col bg-success text-right">
This should always be at the bottom of the page.
<button class="btn btn-primary btn-scroll-up" type="button">Sroll Up</button>
<button class="btn btn-primary btn-scroll-down" type="button">Scroll Down</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/library/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="/library/bootstrap-4.1.0/js/bootstrap.bundle.min.js"></script>
<script src="/javascript/presentation.js"></script>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
overflow-x: hidden;
height: 100%;
}
.flex-fill {
flex: 1;
}
.startpage-col, .headline-col {
border-top-left-radius: 15px 15px;
border-top-right-radius: 15px 15px;
}
.headline-col {
height: 40px;
line-height: 40px;
}
.headline-col h5 {
vertical-align: middle;
display: inline-block;
}
.last-col {
border-bottom-left-radius: 15px 15px;
border-bottom-right-radius: 15px 15px;
height: 50px;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
height:100%;
}
#wrapper.toggled {
padding-left: 350px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 350px;
width: 0;
height: 100%;
margin-left: -350px;
overflow-y: auto;
background: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 350px;
}
#page-content-wrapper {
width: 100%;
height: 100%;
position: absolute;
padding: 15px;
background: #000;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -350px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 350px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li i {
text-indent: 0px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #666;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #000;
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
color: #000;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 350px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 350px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
JS:
$('#menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
Thank you very much!
I had a similar issue: Flexbox height issue with nested flex-grow boxes in Bootstrap 4
Instead of using h-100. which will force the containers to be 100% of viewport height rather than remaining height, use the Bootstrap 4.1 flex grow utils...
flex-grow-1 to fill remaining height of flex container
flex-shrink-0 to make other rows shrink without squishing
Then set overflow:auto on the appropriate div so that it scrolls.
Demo: https://codeply.com/go/lk58xAjDc7
Template (using only Bootstrap classes):
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
...
</ul>
</div>
<div id="page-content-wrapper" class="min-vh-100 p-0 d-flex flex-column overflow-hidden">
<div class="container-fluid d-flex flex-column overflow-auto flex-fill">
<div class="row flex-shrink-1">
<div class="col">
<i class="fas fa-bars fa-2x"></i>
</div>
</div>
<div class="container flex-fill flex-column d-flex">
<div class="row flex-shrink-0">
<div class="col headline-col bg-warning">
<h5 class="align-middle">Headline 1</h5>
</div>
</div>
<div class="section-div flex-grow-1 flex-column d-flex">
<div class="row flex-shrink-0 bg-success">
<div class="col py-1">
<h5>Subtitle 1</h5>
</div>
</div>
<div class="row flex-fill bg-danger d-flex">
<div class="col overflow-auto flex-shrink-1 position-relative">
<div class="position-absolute">
<h5>Subtitle 2</h5>
<p> ... content </p>
</div>
</div>
</div>
</div>
</div>
<div class="container flex-shrink-1">
<div class="row">
<div class="col last-col bg-success text-right"> This should always be at the bottom of the page.
</div>
</div>
</div>
</div>
</div>
</div>
Zim's solution simplified:
<html class="h-100">
<body class="h-100">
<div class="h-100 d-flex flex-column">
<div style="background: lightblue;">
top
</div>
<div class="flex-grow-1 overflow-auto" style="background: lightgreen;">
bottom
</div>
</div>
</body>
</html>
I am experiencing a problem on bootstrap columns on extra small devices. In extra small devices the bootstrap columns overflow and changes the alignment.
I am attaching screenshots from extra small device and other device.
Screenshot of extra small device:
Screenshot of other device(working fine):
Below code is the bootstrap code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="manu.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="header row">
<div class="time_remain col-sm-6 col-xs-6 col-md-6 col-ld-6">00 Min 00 Sec</div>
<div class="logout col-sm-6 col-xs-6 col-md-6 col-ld-6">Logout</div>
</div>
<div class="row frame">
<div class="col-sm-9 col-xs-9 col-md-9 col-ld-9 question_wrapper">
<div class="row questions">
1. This is first one?
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
A
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
First
</div>
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
B
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
Second
</div>
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
C
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
Third
</div>
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
D
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
Fourth
</div>
</div>
</div>
<div class="col-sm-3 col-xs-3 col-md-3 col-ld-3 question_status_wrapper">.col-sm-3</div>
</div>
<div class="row status_bar">
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>00 MIN 00 SEC</div> </div>
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Back</div></div>
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Next</div></div>
<div class="col-sm-0 col-xs-0 col-md-6 col-ld-6 "></div>
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Submit</div></div>
</div>
</div>
</body>
</html>
The css code is given below.
.frame
{
height: 70vh;
}
.question_wrapper
{
height: inherit;
background-color: beige;
overflow: auto;
padding-left: 20px;
padding-right: 20px;
}
.time_remain
{
padding-top: 5px;
color: white;
text-align: left;
padding-left: 20px;
}
.logout
{
color: white;
text-align: right;
padding-right: 20px;
padding-top: 5px;
}
.question_status_wrapper
{
height: inherit;
background-color: bisque;
overflow: auto;
}
.header
{
height: 10vh;
background-color: #333333;
color: white;
}
.status_bar
{
position: fixed;
bottom: 0;
width: 100%;
height: 20vh;
background-color : #333333;
display: flex;
}
.questions
{
margin-top: 20px;
margin-left: 20px;
}
.answer_choice_label_div
{
background-color: black;
color: white;
text-align: center;
height: inherit;
vertical-align: inherit;
border-style: solid;
border-width: 2px;
}
.answer_choice_div
{
background-color: white;
color: black;
height: inherit;
vertical-align: inherit;
border-style: solid;
border-width: 2px;
overflow: inherit;
}
.answer_choice_div:hover
{
background-color: #C6FFF1;
color: black;
height: inherit;
vertical-align: inherit;
border-style: solid;
border-width: 2px;
overflow: inherit;
}
.choice_label_choice
{
margin-top: 10px;
margin-bottom: 10px;
min-height: 10vh;
height: 50px;
vertical-align: middle;
}
.time_bar
{
background-color: aliceblue;
color: black;
align-self: center;
text-align: center;
margin-left: 10px;
min-height: 6vh;
display: inline;
vertical-align: middle;
margin-right: 10px;
padding-top: 7px;
}
I have checked the bootstrap grid and didn't find any problem. Please help.
Use media queries , Paste this code in your style.css
#media only screen and (max-width: 580px)
{
.answer_choice_div
{
width: 83%;
}
.answer_choice_label_div
{
width: 10%;
}
}
Use xs for extra small devices. sm for small devices and md for medium devices.
Follow this link for Grid Options
Grid Options - Bootstrap