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
Related
I have bootstrap form with spinner. Spinner appears when user submits form. It works fine, spinner appears on top of form, however, I cannot make form to be disabled/not-clickable, like usually it is with overlay.
form {
position: relative;
border: 1px solid red
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
opacity: 0.5;
transform: translate(-50%, -50%);
}
<form method="post">
<div class="overlay" id="loading" >
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status" >
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div class="form-group">
<label for="num">Enter number <span>?</span></label>
<input id="num" type="text" class="form-control"/>
</div>
<button type="submit" class="btn btn-primary">Check </button>
</form>
I just added one parent div to .overlay div and positioned it.
Hope this helps!
form{
position: relative;
border: 1px solid red;
}
.overlay-container{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<form method="post">
<div class="overlay-container">
<div class="overlay" id="loading" >
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status" >
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="num">Enter number <span>?</span></label>
<input id="num" type="text" class="form-control"/>
</div>
<button type="submit" class="btn btn-primary">Check </button>
</form>
I have a modal, and I have a background image in it. The only thing I need to do is scale it down. However, when I change the "width", it actually changes the modal's width. I can't come up with a solution. I have read many other posts here on Stackoverflow as well as other sites (such as css tricks) but I can not find a solution. Any thoughts will be more than welcome.
/* Login Modal */
.login-modal-content {
background-image: url('https://cdn.reebit.cl/images/isotipo.png');
background-repeat: no-repeat;
width: 100%;
height: auto;
background-position: right 20px bottom 10px;
}
.login-modal-header {
border-bottom: 0px;
}
.login-modal-body {
width: 100%;
margin: 0 auto;
}
.login-modal-body img {
width: 60%;
}
// My html seems correct to me //
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="modal fade bd-example-modal-lg login-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="loginModal">
<div class="modal-dialog modal-lg">
<div class="modal-content login-modal-content">
<div class="modal-header login-modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body modal-body-img login-modal-body text-center col-lg-6 pb-5 pt-0">
<img src="https://cdn.reebit.cl/images/header-logo.svg">
<h5>¡Hola! Ingresa a tu cuenta</h5>
<form class="login-form">
<div class="form-group login-modal-form-email">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Correo electrónico">
</div>
<div class="form-group login-modal-form-password">
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Clave">
</div>
<button type="submit" class="btn btn-block btn-modal-login">Ingresar</button>
</form>
Olvidé mi clave
</div>
</div>
</div>
</div>
You probably wanna try using background-size CSS property:
/* Login Modal */
.login-modal-content {
background-size: cotain; // Or 'cover'
background-image: url('https://cdn.reebit.cl/images/isotipo.png');
background-repeat: no-repeat;
width: 100%;
height: auto;
background-position: right 20px bottom 10px;
}
There's a very good tutorial here too: https://css-tricks.com/almanac/properties/b/background-size/
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
When I resize my browser to a mobile size, I get a large amount of gap between both div's[Searcharea div and Steps div]. But, while in pc mode, there is no gap. I tried margin top and bottom but, I am not able to figure out the error. Please Help . Thanks. Below is the code.
HTML CODE:
<div class="searcharea col-md-12">
<div class="head col-md-12 col-xs-12">
<h1> Search for your own seat. </h2>
</div>
<div class="col-md-12 col-xs-12">
<div class="input-group custom-search-input">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">
<span class="glyphicon glyphicon-search"></span> CLICK
</button>
</span>
</div><!-- /input-group -->
</div>
</div> <!-- Search Bar ENDs -->
<div class="steps col-md-12 col-xs-12">
<div class="find col-md-12">
<h2 class="findhead">Finding Nearby ! </h2>
</div>
</div>
CSS:
.searcharea{
background-image: url(restback.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 600px;
margin-top: 0px;
}
.custom-search-input {
margin:5%;
width: 60%;
margin-left: 20%;
}
.head{
color: #ffffff;
margin-top: 15%;
text-align: center;
}
.steps {
background-color: lightblue;
height: 700px;
margin-top: 0px;
}
.find{
text-align: center;
}
Problem is with your fixed height i.e. height: 600px;
/* CSS used here will be applied after bootstrap.css */
.searcharea {
background-image: url('http://placehold.it/1200x600');
background-repeat: no-repeat;
background-size: 100% 100%; // Add
min-height: 300px; // Add
}
.custom-search-input {
margin: 0 auto; // Replaced
width: 60%;
padding-bottom: 5%; // Add
}
.head {
color: #ffffff;
margin-top: 15%;
text-align: center;
}
.steps {
background-color: lightblue;
height: 700px;
margin-top: 0px;
}
.find {
text-align: center;
}
<div class="searcharea col-md-12">
<div class="head col-md-12 col-xs-12">
<h1> Search for your own seat. </h1>
</div>
<div class="col-md-12 col-xs-12">
<div class="input-group custom-search-input">
<input class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">
<span class="glyphicon glyphicon-search"></span> CLICK
</button>
</span>
</div>
<!-- /input-group -->
</div>
</div>
<!-- Search Bar ENDs -->
<div class="steps col-md-12 col-xs-12">
<div class="find col-md-12">
<h2 class="findhead">Finding Nearby ! </h2>
</div>
</div>
Bootply
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;
}