No matter what I try, my footer is not filling the full screen width. What can I do?
body width 100% did not work
I tried this, too: Bootstrap Footer, Full Width Of Page
I am working in Angular 11 & Bootstrap 5.
html
<div class="container">
<div class="row align-items-center">
<div class="contentLeftCorner col-sm-4">
<div class="footerComponents me-5" >sth</div>
</div>
<div class="contentCenter col-sm-4"></div>
<div class="contentRightCorner col-sm-4">
<div class="row">
<div class="col-sm-6">
<div class="footerComponents me-5">1</div>
<div class="footerComponents me-5">2</div>
<div class="footerComponents me-5">3</div>
<div class="footerComponents me-5">4</div>
</div>
<div class="col-sm-6">
<div class="footerComponents 5 me-5">a</div>
<div class="footerComponents 5 me-5">b</div>
<div class="footerComponents 5 me-5">c</div>
<div class="footerComponents 5 me-5">d</div>
</div>
</div>
</div>
</div>
</div>
CSS
.footerComponents:hover {
cursor:pointer ;
color: dimgrey;
}
.footerComponents{
border-color: transparent;
}
//no borders on clicked element
*:focus {
outline: 0;
}
.contentRightCorner {
font-size: 0.7rem;
}
Set .conatainer's padding to 0, and .row's width to 100% and remove gutter position on .row. Also remove me-5 class from footerComponents.
.container {
padding: 0 !important;
background-color: aquamarine;
}
.row {
--bs-gutter-x: 0 !important;
width: 100%;
}
.footerComponents {
border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row align-items-center">
<div class="contentLeftCorner col-sm-4">
<div class="footerComponents">sth</div>
</div>
<div class="contentCenter col-sm-4"></div>
<div class="contentRightCorner col-sm-4">
<div class="row">
<div class="col-sm-6">
<div class="footerComponents">1</div>
<div class="footerComponents">2</div>
<div class="footerComponents">3</div>
<div class="footerComponents">4</div>
</div>
<div class="col-sm-6">
<div class="footerComponents">a</div>
<div class="footerComponents">b</div>
<div class="footerComponents">c</div>
<div class="footerComponents">d</div>
</div>
</div>
</div>
</div>
</div>
Note: I have added background-color and border properties to show the exact positions.
Hope, this will help you.
I think this is due to your footerComponents being inside of <div> with the class container. As Bootstrap 5 has set a max-width for the container class on certain size screen. The container class is only 100% on extra small screen. You can refer to the documentation here.
.container max-width
Extra small <576px : 100%
Small ≥576px : 540px
Medium ≥768px : 720px
Large ≥992px : 960px
X-Large ≥1200px : 1140px
XX-Large ≥1400px : 1320px
You can try and bring the footerComponents <div> outside of the container <div> for this.
The other option is to go with container-fluid class which is 100% at all breakpoints.
Put it outside of container DIV.
Related
I implement a bootstrap site. I have an issue in the case the width of the screen is under 576 px (xs for bootstrap)
Don't pay attention to details, I am only interested in the margin of the content in red
<div class="container">
<div class="col-xs-12" *ngIf="innersize < 576">
<div class="row">
<div style="background-color: red"*ngFor="let pr of annonces; let index = index;" class="col-xs-12">
<div id="prePreviousMapIdXS" [style.height.px]="0" *ngIf="index === (insertIndex-1)"></div>
<div id="previousMapIdXS" [style.height.px]="0" *ngIf="index === insertIndex"></div>
<div id="card{{index}}IdXS">
<app-product-light (mouseenter) ="mouseEnterProduitImmobilier(index)" (mouseleave) ="mouseLeaveProduitImmobilier(index)" [produit]="pr"></app-product-light>
</div>
<div id="listXSMap" [style.margin-bottom.px]="25" [style.width.px]="cardWidth" [style.height.px]="cardHeight" *ngIf="index === insertIndex" >
<agm-map #gm [latitude]="mainLatitude" [longitude]="mainLongitude" [style.height.px]="computeMapXSHeight()" [fitBounds]="true">
<agm-marker *ngFor="let marker of markers; let index = index" [latitude]="marker.latitude" [longitude]="marker.longitude" [iconUrl]="markers[index].markerIcon" [animation]="markers[index].markerAnimation" (markerClick)="clickedMarker(infoWindow, gm)" [agmFitBounds]="true">
<agm-info-window [disableAutoPan]="false" #infoWindow [maxWidth]="350">
<span class="">
<div style="float: left;">
<img width="70" height="40" src="../../assets/images/maison1.png" alt="Card image cap">
</div>
<div style="float: right; padding-left: 10px">
<div class="poppinsbold10diese372300 whitespacenowrap">{{annonces[index].nbrPiece}}
Pièces / {{annonces[index].nbrChambre}} Chambres / {{annonces[index].surfaceHabitable}}m<sup>2</sup>
</div>
<div class="poppinsregular8diese171717DE whitespacenowrap opacity05 ">
{{annonces[index].adresse}} / {{annonces[index].ville}} / {{annonces[index].codePostal}}
</div>
<div class="poppinsextrabold10diese372300 whitespacenowrap" style=" margin-top: 5px">
{{annonces[index].prix | currency:'EUR':'symbol':'1.0-0':'fr'}}
</div>
</div>
</span>
</agm-info-window>
</agm-marker>
</agm-map>
</div>
</div>
</div>
</div>
</div>
Here is the fiddle : https://jsfiddle.net/boilerplate/bootstrap
The issue is that when I resize the width under 576px, there is no more margin. Above that size there is a margin
That's the default behavior of .container on mobile devices: width: 100%. If you want to limit it to say 94% of the available device width below 576px, use this CSS:
#media (max-width: 575px) {
.container {
width: 94%;
}
}
See it here: https://jsfiddle.net/websiter/p1n0j4vu/
Change 94% to whatever makes sense for your project.
For example, if you want to maintain fixed margins of 30px below that responsiveness breakpoint, you could use calc(100% - 60px).
The issue is that you're using the container class for your container. You can instead use the container-fluid class and style it to have padding. Here's a JSFiddle. The difference between the container class and container-fluid class is that the container class will resize and adjust its margin depending on the size of the viewport. Here is the adjusted code:
HTML:
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container-fluid">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
CSS:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.container-fluid {
padding: 0 30px;
}
I finally found a solution without understandind it
In place of
col-xs-12
I put everywhere
col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12
and it works
I have created a 3 column grid which contains some text and an image in between using Bootstrap 4 for the grid system.
I've noticed that although my image has a img-fluid class assigned the image overflows outside the div.
Can anyone explain the reason for this?
HTML
<div class="row">
<div class="col blue-bg-outter">
<div class="col blue-bg" style="height: 300px;">
<!-- start of content -->
<div class="row">
<div class="col">
<h2> Some line</h2>
</div>
<div class="col img-col">
<img src="https://purepng.com/public/uploads/large/51508089516arw4tqfangou1wmvwzihlw7hxnzjujpulweq1otwrsdcsaxc5kvmu1crkpcyfxezyx4dmcvkbgg5w7oc1sioxib4j044tjwbfcyu.png" alt="" class="img-fluid">
</div>
<div class="col">
<h2> Another line</h2>
</div>
</div>
</div>
</div>
</div>
CSS
.img-fluid {
max-height: 100vh;
}
.blue-bg-outter {
padding: 60px;
}
.blue-bg {
background: #3ad7f7;
}
Might be easier to see on an actual page, please view the CodePen.
Because you have set a height on a parent div to 300px, if you remove height it works. Or you can set the height of img-fluid to 300px as #august suggested:
<div class="col blue-bg">
https://codepen.io/anon/pen/oJKvLp
Or you can keep the height and stop the image overflowing like this:
.blue-bg
{
overflow: hidden;
}
I have a page with a banner and 3 columns, and I am trying to make it so that when the screen width gets too small, that the first 2 columns change from 1/3rd width to 50% width and the last column width change to 100% so that it's below the first two.
When I do this, the height of the columns does change (they change to 50%, considering the columns will now fit underneath each other inside a 100% row), but the width does not. How could I fix this? Thanks in advance!
Codepen
HTML
<section class="section">
<div class="container-fluid">
<div class="aboutBanner"> </div>
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>
</section>
related CSS
.aboutBanner {
height: 30%;
border: 1px solid blue;
}
.row {
height: 70%;
}
.row .col {
height: 100%;
border: 1px solid red;
}
#media screen and (max-width: 768px){
.row .col:nth-of-type(1),
.row .col:nth-of-type(2) {
height: 50%;
width: 50%;
}
.row .col:nth-of-type(3) {
height: 50%;
width: 100%;
border-style: dashed;
}
}
Use the Bootstrap responsive grid columns...
https://codepen.io/anon/pen/eMzRyb
<section class="section">
<div class="container-fluid">
<div class="aboutBanner">
</div>
<div class="row">
<div class="col-sm-4 col-6">
</div>
<div class="col-sm-4 col-6">
</div>
<div class="col-sm-4 col-12">
</div>
</div>
</div>
</section>
To visualize this in your codepen I changed the CSS...
.row {
height: 70%;
}
.row > div {
border: 1px solid red;
}
Also see:
What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
Use bootstrap col-[size] class
See documentation
The bootstrap grid is based in 12 columns sizes, that are divided in 5 screen sizes:
Extra small
col-[1 to 12]
Small
col-sm-[1 to 12]
Medium
col-md-[1 to 12]
Large
col-lg-[1 to 12]
Extra large
col-xl-[1 to 12]
Try this:
<section class="section">
<div class="container-fluid">
<div class="aboutBanner"> </div>
<div class="row">
<div class="col-md-4 col-sm-6">
content of first
</div>
<div class="col-md-4 col-sm-6">
content of second
</div>
<div class="col-md-4 col-sm-12">
content of third
</div>
</div>
</div>
</section>
Keep in mind that 12 is 100%, 6 is 50%, 4 is 33%, 3 is 25% and so on...
I would like to know how easilly achieve this layout with Bootstrap 3.
You can achieve that layout using bootstrap 3 pretty easy, you just have to arrange your columns in a proper order. The orange~red block I believe its a sidebar, and the other two blocks have the same width (seems bound to the same container), and I think there you have your content.
So, put the sidebar block, in a container with the desired width from the bootstrap grid, like col-md-4, and the content block in a container say col-md-8; add to both these containers col-xs-12 class(will add 100% width on 768px and bellow), we'll need it because we're gonna use pull-left/right(float rule) class to swap them around.
Check out the demo and bellow the markup/css used
The markup:
<div class="container">
<div class='row cf'>
<div class='col-sm-4 col-xs-12 pull-right'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12 pull-left'>
<div class='content-entry orchid'>
Some content here
</div>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
And the css:
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
**Note: if you want that sidebar to expand it's height to the height of the other 2 blocks combined, that's a different story, but this should get you started.
UPDATE 2
OK since you have a layout a bit tricky on mobile, I guess your safest bet would be to make the sidebar absolute positioned, and on mobile(bellow and 767px), switch it to static position, to make em fall into a natural flow. There are some more other methods out there like flexbox, or maybe some fancy table tricks, but this one should get you going.
Check out the demo, and the changed markup/css bellow:
<div class="container">
<div class='row content-wrapper'>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry orchid'>
Some content here
</div>
</div>
<div class='col-sm-4 col-xs-12 sidebar-wrapper'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
/*added rules*/
.content-wrapper{
position: relative;
}
.sidebar-wrapper{
position: absolute;
top: 0; right: 0;
}
#media all and (max-width: 767px){
.sidebar-wrapper{
position: static;
}
}
Have a look here, I think the .col-md-8 and .col-md-4 classes will be interesting for you.
Since stack Overflow will not do any project i posted you simple and easy step
Bootstrap use media-queries
example
#media screen and (max-width: 500px) {
div {
width: 80%
}
}
this above query works if screen is bellow 500px div width will be 80%
try this example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
#media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Above example will show when screen size is bellow 600px page color will change from lightgreen to lightblue
<body class="container">
<div class="row">
<div class="col-sm-6 col-xs-12">orange</div>
<div class="col-sm-6 col-xs-12">
<div class="row">violet row</div>
<div class="row">light blue</div>
</div>
</div>
</body>
I used xs-12 for the mobile. Please post your example code next time.
Thank you for all your answers.
Here's what i've made with the help of all answers :
<div class="container">
<div class="row">
<div class="col-sm-8 bg-info">
<h4>Content 1</h4>
</div>
<div class="col-sm-4 bg-warning pull-right">
<h4>Sidebar</h4>
</div>
<div class="col-sm-8 bg-success pull-left">
<h4>Content 2</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>
I'm trying to have 4 cols inside a row with equal margins but i did not get the desired look
here is my html code
<div class="panel panel-default">
<div class="panel-heading">Account Summary</div>
<div class="panel-body">
<div class="row center-block text-center summary_boxes">
<div class="col-sm-3">2500</div>
<div class="col-sm-3">1300</div>
<div class="col-sm-3">1000</div>
<div class="col-sm-3">1000</div>
</div>
</div>
css code
.summary_boxes div
{
background-color:#eee;
border: 1px solid #DDDDDD;
border-radius:3px;
}
and this is the result
The issue is that Bootstrap uses padding for columns and columns themselves shouldn't have additional styles applied directly to them.
What you should do is make child elements of the columns and give those the style you want, then you will have the "margin" you are looking for.
<div class="panel panel-default">
<div class="panel-heading">Account Summary</div>
<div class="panel-body">
<div class="row center-block text-center summary_boxes">
<div class="col-sm-3"><span>2500</span></div>
<div class="col-sm-3"><span>1300</span></div>
<div class="col-sm-3"><span>1000</span></div>
<div class="col-sm-3"><span>1000</span></div>
</div>
</div>
</div>
With the style:
.col-sm-3 > span {
background: red;
display: block;
}
Here is a working fiddle, you might have to make the output window wider to correctly see the result depending on your screen resolution http://jsfiddle.net/LysqB/