I've got a partial view that I want to have a sticky footer on. Unfortunately the scrollable div overflows with my footer no matter what I try.
<div id="wrap">
<div class="container">
<div class="scrollable">
<div class="scrollable-content">
<div class="list-group">
<a ng-repeat="msg in chatmessages" href="#" class="list-group-item">
<div class="bubble bubble-{{msg.dir}}">{{msg.text}}</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<form class="row row-chat">
<div class="input-group">
<input type="text" class="form-control" ng-model="messageText" placeholder="Type your message" />
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">Send</button>
</span>
</div>
</form>
</div>
</div>
Custom CSS:
#wrap {
min-height: 100%;
height: auto !important;
margin: 0 auto -60px;
}
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
fix the footer with the specifec height like using styles
#footer
{
top:1200px;
left:300px;
}
Related
Why does the "Subscribe now!" button go outside the container in the picture below and how can I make it so that the right edge lines up with the rest of the page? (column 12 in the bootstrap grid)
I have tried box-sizing: border-box but it had no effect.
My HTML code:
.container-fluid {
padding: 0;
}
.carousel-inner .carousel-item h1 {
font-weight: bold;
font-size: 300%;
/*-webkit-text-stroke:1px black;*/
font-family: 'Open Sans', sans-serif;
/*text-align:right;*/
}
.carousel-inner .carousel-item img {
filter: brightness(50%);
}
#paddingrow {
padding: 25px;
}
#paddingrowLarge {
padding: 100px;
}
#accordionRightalign {
float: right;
}
#mycard {
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row" id="paddingrow"></div>
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<button class="btn btn-primary" style="box-sizing: border-box" type="submit">Subscribe now!</button>
</div>
</form>
</div>
</div>
</div>
</div>
Bootstrap rows have margin-right: -15px; margin-left: -15px; that's why the right edge doesn't lined up. Try to add mx-0 = margin-left:0 and margin-right: 0, a bootstrap class. In your nested row form.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row" id="paddingrow"></div>
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form>
<div class="row mx-0">
<div class="col pl-0 pr-3">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<button class="btn btn-primary" style="box-sizing: border-box" type="submit">Subscribe now!</button>
</div>
</form>
</div>
</div>
</div>
</div>
Make sure col in the container with margin and padding to zero.
Put your image into container with the width not greather than 100%.
I noticed my button wasn't in the column div, so I made two column div's, one size 10 and one size 2, put input in the first, put the button in the second, and it seems to work now.
Here is the fixed code:
<div class="container">
<div class="row" id="paddingrow"></div>
<div class="row">
<div class="col-sm-12">
<h1 style="text-align:center">SUBSCRIBE TO OUR NEWSLETTER</h1>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<form class="form">
<div class="row">
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Enter your email">
</div>
<div class="col-sm-2">
<button class="btn btn-primary w-100" type="submit">Subscribe now!</button>
</div>
</div>
</form>
</div>
</div>
</div>
I want to put image as header's background and I tried this and it doesn't work.
.header-fit {
background-image: url('{{ asset('img/justice.jpg') }}');
max-height: 100%;
height: auto;
width: 100%;
}
<header id="home" class="header-fit">
<div id="maincontent" class="container" tabindex="-1">
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="#">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
</div>
</div>
</div>
</header>
I guess this css would be worked solution for you if path to image is correct
.header-fit {
background-image: url(img/justice.jpg);
max-height: 100%;
height: auto;
width: 100%;
}
Here is you would read some info regarding usage of background-image property
I'm using bootstrap classes to arrange my page, and it was going fine until my latest row:
#* row 7: Copy, Excel, CSV, and PDF buttons *#
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-8">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-1">
<label style="text-align: right;">Search:</label>
</div>
<div class="col-md-1">
<input type="text" style="margin-right: 2cm;" name="searchinput">
</div>
<div class="col-md-1">
</div>
</div>
That row is preceded and followed by rows like this:
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
I need the input text to shift to the left, away from the right border, and closer to the "Search" label.
How can I accomplish this?
I also don't know why the row is so tall, making the buttons overly tall - or why the buttons are so tall, making the row tall...
The css used is:
.squishedbutton {
border: none;
margin-left: 0cm;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
UPDATE
This is how it looks now:
...with this html:
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-1">
<label style="text-align: right; display: inline-block;">Search:</label>
</div>
<div class="col-md-1">
<input type="text" style="margin-right: 2cm;" name="searchinput">
</div>
</div>
...and this css:
.squishedbutton {
margin-left: 0cm;
margin-right: -0.1cm;
padding: 4px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
IOW, it looks more-or-less "okay" but I would like the input text shifted to the left and/or the label shifted to the right so that they appear a little more "cozy"
.squishedbutton {
border: none;
margin-left: 0cm;
padding:0 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
hr{ margin:0;}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-3 ">
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Search</label>
<input type="text" class="" id="exampleInputName2" placeholder="">
</div>
</form>
</div>
<div class="col-md-1">
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr />
</div>
</div>
</div>
and if you want label and text to come next to buttons then place them just after buttons.
UPD. There are three rows in the code below:
Original CSS from the answer.
Shift <label> to right.
Place <label> and <input> in the same column.
Does something look as you need?
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#media (min-width: 992px) {
h2 {
margin: 0;
padding: 10px 0 0 0;
}
/* 1. */
.shift-to-right {
padding-right: 0;
text-align: right;
}
/* 2. */
.make-them-closer {
padding-top: 13px;
}
.make-them-closer label {
float: left;
padding-right: 4px;
padding-top: 3px;
}
.make-them-closer div {
overflow: hidden;
}
.make-them-closer input {
width: 100%;
}
}
.squishedbutton {
border: none;
margin-left: 0cm;
padding: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12"><hr /></div>
<div class="col-md-1">
<h2>0.</h2>
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-1">
<label style="text-align: right; display: inline-block;">Search:</label>
</div>
<div class="col-md-1">
<input type="text" style="margin-right: 2cm;" name="searchinput">
</div>
<div class="col-md-12"><hr /></div>
<div class="col-md-1">
<h2>1.</h2>
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-1 shift-to-right">
<label>Search:</label>
</div>
<div class="col-md-1">
<input type="text" name="searchinput">
</div>
<div class="col-md-12"><hr /></div>
<div class="col-md-1">
<h2>2.</h2>
</div>
<div class="col-md-7">
<button type="button" class="squishedbutton">Copy</button>
<button type="button" class="squishedbutton">Excel</button>
<button type="button" class="squishedbutton">CSV</button>
<button type="button" class="squishedbutton">PDF</button>
</div>
<div class="col-md-2 make-them-closer">
<label>Search:</label>
<div><input type="text" name="searchinput"></div>
</div>
<div class="col-md-12"><hr /></div>
</div>
</div>
Hello, i'm kinda new at css/bootstrap, i'm learning actually.
In this case, i will probably need to add some css at "chat_funcs" div, but i don't know what to write to get what i want.
The problem:
What i want is:
My code so far:
HTML:
<div id="chat" class="col-md-3 col-xs-12">
<span class="titulo">Chat</span>
<div class="msg">Mensagem teste</div>
<div class="msg">Mensagem teste</div>
<div class="msg">Mensagem teste</div>
</div>
<div id="chat_funcs" class="pull-right col-md-3 col-xs-12">
<div class="pull-left">
<input class="form-control" type="text">
<input class="btn btn-default" type="button" value="Enviar">
</div>
</div>
CSS:
#chat {
background-color: red ;
overflow: scroll;
overflow-x: hidden;
height: 80%;
position: absolute;
right: 0;
display: inline-block;
}
In order to achieve this you are going to use additional html div container. There're other ways too, but this one came to my mind first.
Here is html markup:
<div id="chat-container" class="col-md-3 col-xs-12">
<div class="row">
<div id="chat" class="col-md-12 col-xs-12">
<span class="titulo">Chat</span>
<div class="msg">Mensagem teste</div>
<div class="msg">Mensagem teste</div>
<div class="msg">Mensagem teste</div>
</div>
</div>
<div class="row">
<div id="chat_funcs" class="col-md-12 col-xs-12">
<div class="pull-left">
<input id="message-text" class="form-control" type="text"><br/>
<input class="btn btn-default" type="button" value="Enviar">
</div>
</div>
</div>
</div>
and here is css:
#chat-container{
position: absolute;
right: 0;
width: 160px;
}
#chat {
background-color: red ;
overflow: scroll;
overflow-x: hidden;
height: 80%;
width: 100%;
display: inline-block;
}
#message-text{
width: 140px;
}
here is a fiddle
I hope this helps
I'm trying to align a row of buttons on the bottom but also have two rows of text at the top both justified left using twitter bootstrap. Here is what I'm trying to achieve:
Here is a jsfiddle of my recent attempt:
My current css files look like this:
.profile-avatar {
position:relative;
height:170px;
}
.profile-avatar img {
height: 160px;
width: 160px;
margin-left: 20px;
}
.profile-buttons {
margin-left: 15px;
margin-top: 110px;
}
I'm completely lost on how to add two rows of text to the top right of the image above the three buttons.
Any thoughts?
Thanks,
-Paul
http://jsfiddle.net/kks6h0bc/7/
.text-0,.text-1{
position: absolute;
top: 0px;
left: 200px;
display:block;
}
.text-0{
top: 0px;
font-size:30px;
}
.text-1 {
top: 50px;
}
Try with position: absolute; (watch fiddle)
Check this Fiddle. I Hope it helps.
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
<div class="profile-avatar">
<div class="row">
<div class="col-xs-12">
<img src="http://www.kanorika.com/friendly/demo/data/avatars/min4/SyWH14RnFCt.jpg" class="profile-img img-responsive"/>
</div>
</div>
</div>
</div>
<div class="col-xs-9">
<div class="row">
<div class="col-xs-12">
Large Text<br>Small Text
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default profile-buttons">Default</button>
<button type="button" class="btn btn-default profile-buttons">Default</button>
<button type="button" class="btn btn-default profile-buttons">Default</button>
</div>
</div>
</div>
</div>
</div>
</div>