I have a simple footer with contact information that contains of three rows. The first two appear at the top, the last one should be placed on the very bottom of the container.
So what I did was using an absolute positioning:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row verybottom">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</footer>
The positioning works fine, but whatever I do - the last row is only a wide as the col above it. can someone help me align the content with the rows above?
You need to put a container inside to get it to work... and then introduce another .row since we want the col-md-XX classes to work
working snippet:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
padding-left: -15px;
}
.row {
border: 1px dotted red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row">
<div class="container verybottom">
<div class="row">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</div>
</div>
</footer>
Related
I am trying to display three image in same row
for that i am using
<div ng-repeat="p in imageses">
<div class="col-sm-4" >
<img ng-src="{{p.path}}" class="rounded"/>
</div>
</div>
this is showin only one image at a line i want to show three images per line
Try this.
<div class='row'>
<div ng-repeat="p in imageses" class="col-sm-4" >
<img ng-src="{{p.path}}" class="rounded"/>
</div>
</div>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div class="row">
<div class="column">
<img src="img_fjords.jpg" alt="Fjords" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
The basic structure should be following:
<div class="container"><!--use container-fluid if you want full width-->
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>
</div>
For better clarification please check their doc
I'm trying to achieve a layout like below in Bootstrap but am having a difficult time with it. I feel dumb asking this but it's my first time using Bootstrap and I couldn't find a similar example on here.
Thanks!
I thought maybe something like this, but div C clears div B and ends up way too far down the page.
<div class="container">
<div class="row">
<div class="col-md-8">
A
</div>
<div class="col-md-4">
B
</div>
</div>
<div class="row">
<div class="col-md-8">
C
</div>
</div>
</div>
If you need a pure bootstrap solution you need to add col-xs-12 to make it 100% on mobiles and col-sm-6 to make it 50% on desktop. The add pull-left and pull-right to avoid the B panel to clear and move C below everything
.bg-danger, .bg-primary {
height: 200px;
}
.bg-success {
height: 400px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row container-fluid">
<div class="col-sm-6 col-xs-12 bg-danger pull-left"></div>
<div class="col-sm-6 col-xs-12 bg-success pull-right"></div>
<div class="col-sm-6 col-xs-12 bg-primary pull-left"></div>
</div>
</div></body>
</html>
Click full page to see the difference
Here we have an explanation about the grid system.
http://getbootstrap.com/css/#grid
Here's a simple solution:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
</div>
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
The page is split in half with the two outer columns "col-sm-6", with one of these columns containing two inner columns that span it's entire width
A simple solution if you want essentailly the green box to come in between.
Check this Bootply for responsive-ness check.
Snippet here:
.something {
height: 100px;
margin-top: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="something bg-danger"></div>
</div>
<div class="col-md-6">
<div class="something bg-success"></div>
</div>
<div class="col-md-6">
<div class="something bg-primary"></div>
</div>
</div>
</div>
Here is another example where the Green box will come below the rest two boxes..:
.something {
height: 100px;
margin-top: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div clas="col-md-6">
<div class="col-md-12">
<div class="something bg-danger"></div>
</div>
<div class="col-md-12">
<div class="something bg-primary"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="something bg-success"></div>
</div>
</div>
</div>
You should use Pure CSS Flexbox for this.
Have a look at the snippet below (use full screen for desktop mode):
.box-holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 280px;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid #000;
color: #fff;
margin: 15px;
font-size: 40px;
font-weight: 200;
}
.a {
background: red;
}
.b {
align-self: flex-start;
order: 1;
background: green;
height: 240px;
margin: 0;
}
.c {
background: blue;
}
/* On Mobiles */
#media screen and (max-width: 700px) {
.box-holder {
width: auto;
height: auto;
}
.b {
align-self: center !important;
order: 0;
margin: 15px;
}
}
<div class="box-holder">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
</div>
Hope this helps!
I hope this helps..:)
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3"><!--div for the left side abc pattern starts-->
<div class="row">
<div class="col-sm-12">
"standing a"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"standing b - adjust the height of this block"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"standing c"
</div>
</div>
</div><!-- div for the left side abc pattern ends -->
<div class="col-sm-6"><!-- div for the right side abc pattern starts -->
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
"block a"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"block b"
</div>
</div>
</div>
<div class="col-sm-6">
"block c"
</div>
</div>
</div><!-- div for the right side abc pattern ends -->
</div><!-- row closed here -->
</div>
I found this popular stackoverflow post (see also jsFiddle), which covers exactly my problem. But after applying this solution to my MWE, see on bootply, it still doesn't work. Why is it not working?
HTML:
<div class="container">
<h1>Hello!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<div class="outer">
<div class="inner">
<p>hello</p>
<br>
...
</div>
</div>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>hello once</p>
</div>
</div>
CSS:
.inner {
height:200px;
overflow-y: auto;
}
.outer{
overflow:hidden;
}
To get the effect within a bootstrap column, you can set the right margins to a minus value and thereby hide the scrollbar.
Also, add some more content so you've got something to scroll!
.inner {
height:200px;
overflow-y: auto;
margin-right:-15px;
}
.outer{
overflow:hidden;
margin-right:-15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<h1>Hello!</h1>
<div class="row">
<div class="col-sm-3" style="background-color:yellow;">
<div class="outer">
<div class="inner">
<p>hello</p>
<br>
...
<p>hello</p>
<br>
...
<p>hello</p>
<br>
...
<br>
...
<p>hello</p>
<br>
...
</div>
</div>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>hello once</p>
</div>
</div>
I would like to be able to align different sized images to the bottom of a div.
I have the following markup:
<div class="container">
<div class="container">
<div class="footer-images">
<img src="img1">
<img src="img2">
<img src="img3">
</div>
</div>
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
I can't figure out how to have all the images aligned to the bottom of the footer-images div. Any help would be greatly appreciated.
try this
.footer-images img{
vertical-align:bottom;
border:0;
}
In Bootstrap v4 you can use the class align-items-end to achieve bottom alignment in a div. You can use this class on the row or on the column.
Example with all column content aligned to the bottom.
<div class="container">
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
Example with first column top, second colum middle and third colunm bottom alignment.
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Source: Bootstrap documentation.
Does this help?
<style type="text/css">
.footer-images {
margin: auto;
display: block;
position: absolute;
bottom: 0;
}
.footer-images .copyright {
text-align: center;
}
</style>
Using this HTML
<div class="container">
<div class="container">
<div class="footer-images">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/640x480">
<img src="http://placehold.it/120x120">
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
</div>
</div>
used to this css and apply
.footer-images img{
width:xxpx;
height:xxpx; // add here your style as like with height border etc.
vertical-align:top;
border:0;
}
More about bootstrap
It would be enough:
margin-top: auto;
See https://jsfiddle.net/d3jau1gx/
I'm trying to use LESS framework 4, and i've create this css code:
#sponsor .ristorante {
width: 92px;
float:left;
margin-bottom: 30px;
}
#sponsor .ristorante .name {
font-size: 14px;
}
and in html file:
<div id="sponsor">
<div class="ristorante">
<div class="name">RISTO1</div>
</div>
<div class="ristorante">
<div class="name">RISTO2</div>
</div>
<div class="ristorante">
<div class="name">RISTO3</div>
</div>
<div class="ristorante">
<div class="name">RISTO4</div>
</div>
<div class="ristorante">
<div class="name">RISTO5</div>
</div>
<div class="ristorante">
<div class="name">RISTO6</div>
</div>
<div class="ristorante">
<div class="name">RISTO7</div>
</div>
<div class="ristorante">
<div class="name">RISTO8</div>
</div>
<div class="ristorante">
<div class="name">RISTO9</div>
</div>
<div class="ristorante">
<div class="name">RISTO10</div>
</div>
</div>
but in broweser see 9 risto in first line and one risto in seconvd line!
instead, body layout default is width:896 with 10columns
how can i have ten columns??
thanks!
the width of your elements is pushing the last one to a new line.
10 x divs # 92px wide each is 920px for all columns. If I understand you correctly you have 896px set.
Change your wrapper width to 920px and you'll be ok. OR change your ristorante width to 89px