I am just learning how to use css and bootstrap to create an website based on a psd template, problem is that i cant keep my search box inside the container and it stays in the bottom of it.
Here is my code
.search-area {
margin-top: 3px;
text-align: right;
}
.search-area input {
background: #333333;
color: #ffffff;
border: 0px solid;
}
<body>
<div id="header-area1">
<div class="container">
<div class="top-header col-12 bg-succes">
<div class="left-header col-8">
<div class="feed-area">
<ul>
<li> Sign Up</li>
<li> Login</li>
<li> Rss Feed</li>
<li id="last"> Archived News</li>
</ul>
</div>
<div class="right-header col-4">
<div class="search-area">
<form action="">
<input type="textplaceholder=" Search...">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
I rewrote your code to fix it. do not forget to user "row" class out of your columns in bootstrap
<div id="header-area1">
<div class="container">
<div class="top-header col-12 bg-succes">
<div class="row">
<div class="left-header col-8">
<div class="feed-area">
<ul>
<li> Sign Up</li>
<li> Login</li>
<li> Rss Feed</li>
<li id="last"> Archived News</li>
</ul>
</div>
</div>
<div class="right-header col-4">
<div class="search-area">
<form action="">
<input type="textplaceholder=" Search...">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Update my answer missing of row before col
.search-area {
margin-top: 3px;
text-align: right;
}
.search-area input {
background: #333333;
color: #ffffff;
border: 0px solid;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body>
<div id="header-area1">
<div class="container">
<div class="top-header row bg-succes">
<div class=" col-8">
<div class="feed-area">
<ul>
<li> Sign Up</li>
<li> Login</li>
<li> Rss Feed</li>
<li id="last"> Archived News</li>
</ul>
</div>
</div>
<div class=" col-4">
<div class="search-area">
<form action="">
<input type="text" placeholder=" Search...">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
Use this HTML structure for right align to searchbox.
Add col-6 with feed-area class. And instead os this <div class="left-header col-8"> use this <div class="left-header row">
<div id="header-area1">
<div class="container">
<div class="row">
<div class="top-header col-12 bg-succes">
<div class="left-header row">
<div class="feed-area col-6">
<ul>
<li>
Sign Up
</li>
<li>
Login
</li>
<li>
Rss Feed
</li>
<li id="last">
Archived News
</li>
</ul>
</div>
<div class="right-header col-4">
<div class="search-area">
<form action="">
<input type="textplaceholder=">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.search-area {
margin-top: 3px;
text-align: right;
}
.search-area input {
background: #333333;
color: #ffffff;
border: 0px solid;
}
Related
How can i create a simple subscription form? i have tried using this codes and css style, but they don't align the way it should be. whats wrong with what i've done? can someone point me in the right direction?
i want the form to have a background color or image and sit just above the footer, how do i achieve this?
.subscribe-container {
width: 100%;
padding-bottom: 5px;
margin-left: 200px;
margin-top: -40px;
}
.subscribe-container li {
display: block;
float: right;
width: 60%;
margin: 0 auto;
}
<form method="post" class="subscribe-form" action="#">
<div class="row">
<div class="col span-1-of-3">
<ul class="subscribe-container">
<li class="subscribe-feature">
<label for="email">Get Updates</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="subscribe-container">
<li class="subscribe-feature">
<input type="text" class="updates" id="updates" placeholder="Email Address">
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="subscribe-container">
<li class="subscribe-features">
<label> </label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="subscribe-container">
<li class="subscribe-features">
<input type="submit" class="subscribe-btn" value="Subscribe">
</li>
</ul>
</div>
</div>
</form>
you will need to define the height and width of your class: subscribe-form and then set the background-color or image, like this:
.subscribe-form{
width: 500px;
heigth: 500px;
background-image:url("/your directory");
//or
background-color: blue;
}
In relation to the form you are going to the right direction, your "action" needs to ref some action page like in php, and if you need something like a javascript function, you can create a tag script in your code to enable javascript functions, you will need to add a button type="submit" in your html to call them, like that:
<html>
<form method="post" class="subscribe-form" action="#" onsubmit="doSomething()">
<div class="row">
<div class="col span-1-of-3">
<ul class="subscribe-container">
<li class="subscribe-feature">
<label for="email">Get Updates</label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="subscribe-container">
<li class="subscribe-feature">
<input type="text" class="updates" id="updates" placeholder="Email Address">
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<ul class="subscribe-container">
<li class="subscribe-features">
<label> </label>
</li>
</ul>
</div>
<div class="col span-2-of-3">
<ul class="subscribe-container">
<li class="subscribe-features">
<input type="submit" class="subscribe-btn" value="Subscribe">
</li>
</ul>
</div>
<button type="submit">Action form</button>
</div>
</form>
</html>
<script>
doSomething() {
window.alert('Thats the action of my form!');
}
</script>
I'm working on a project for school. I must make a website with Bootstrap 3 exactly like this:image 1 and image 2.
I'm almost done with the page, but I am stuck. I want indicator numbers like the picture where I marked in black.
How can I create indicators like that?
After searching on internet I got something like this: https://www.codeseek.co/danbhala/bootstrap-carousel-indicator-with-numbers-gpWvxG. The problem is I can't make the number red after the page has been visited.
Thanks for the help.
Sorry for the bad picture and my English. If something is not clearly stated, ask a question I will answer it.
*{
margin: 0;
}
html, body {
height: 100%;
background-color: rgb(228, 228, 228);
}
#content-container {
height: auto !important;
min-height: 100%;
margin: 0 auto;
}
.panel {
width: 99%;
margin-left: 0.4%;
box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#footer {
min-height: 18%;
margin-top: 2%;
padding-top: 2%;
background-color: rgba(193, 188, 188, 0.55);
font-size: 12px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/SelectDate.css">
<title>Werken met Bootstrap</title>
</head>
<body>
<!-- Begin content-container -->
<div id="content-container">
<!-- Begin navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="Index.html"><i class="fa fa-building-o" style="font-size:19px; color:red"> </i><b> Hotel</b> Booking</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Explore Hotels</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
<!-- End navbar -->
<!-- Begin Container -->
<div class="container">
<h3><b>The Student Hotel The Hague</b></h3>
<br>
<div id="myCarousel" class="carousel slide" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">1</li>
<li data-target="#myCarousel" data-slide-to="1">2</li>
<li data-target="#myCarousel" data-slide-to="2">3</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="panel panel-defualt">
<div class="panel-body">
<p>Welcome! Let's book a room you'll love.<br>
Please provide us with the information started below, we will handle the data with care.
</p>
<hr>
<div class="row">
<div class="col-md-2" style="padding-top: 3%;">
<label class="radio-inline"><input type="radio" name="optradio">Mr</label>
<label class="radio-inline"><input type="radio" name="optradio">Mrs</label>
</div>
<div class="form-group col-md-5">
First name:
<input type="text" class="form-control" placeholder="Enter first name">
</div>
<div class="form-group col-md-5">
Last name:
<input type="text" class="form-control" placeholder="Enter last name">
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
Departure Date
<input type="text" class="form-control" placeholder="dd-mm-jjjj">
</div>
<div class="col-md-4">
Return Date
<input type="text" class="form-control" placeholder="dd-mm-jjjj">
</div>
<div class="col-md-4">
Rooms
<select class="form-control">
<option>1 Room</option>
<option>2 Room</option>
<option>3 Room</option>
<option>4 Room</option>
</select>
</div>
</div>
<hr>
<div class="pull-right">
Cancel <a href="#myCarousel" data-slide="next"><button type="button" class="btn btn-danger">Pick a room <b>></b></button>
</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="image/hotel.jpg">
</div>
<div class="item">
<img src="image/hotel2.jpg">
</div>
</div>
</div>
</div>
<!-- End Container -->
</div>
<!-- End content-contrainer -->
<!-- Begin Footer -->
<div id="footer">
<div class="container text-left">
<div class="row">
<!--First column-->
<div class="col-md-4">
<h6 class="mb-4 mt-3 font-weight-bold"><i class="fa fa-building-o" style="font-size:14px;"><b> Hotel</b> Booking</i></h6>
<ul class="list-unstyled">
<li>
Niewmansstraat 123
</li>
<li>
1234 AB The Hague
</li>
<li>
The Netherlands
</li>
<li>
<br>
© 2018 Hotel Booking
</li>
</ul>
</div>
<!--/.First column-->
<b>
<!--Second column-->
<div class="col-md-4">
<h5 class="mb-4 mt-3 font-weight-bold"><b>Useful links</b></h5>
<ul class="list-unstyled">
<li>
Explore hotels
</li>
<li>
Reviews
</li>
<li>
A link
</li>
<li>
Another link
</li>
<li>
Different link
</li>
</ul>
</div>
<!--/.Second column-->
<!--Third column-->
<div class="col-md-4">
<h5 class="mb-4 mt-3 font-weight-bold"><b>The Company</b></h5>
<ul class="list-unstyled">
<li>
About
</li>
<li>
Careers
</li>
<li>
Press centre
</li>
<li>
Terms & Conditions
</li>
<li>
Contact us
</li>
</ul>
</div>
<!--/.Third column-->
</b>
</div>
</div>
</div>
<!-- End Footer -->
</body>
</html>
CSS:
.carousel-indicators-numbers li {
text-indent: 0;
margin: 0 2px;
width: 30px;
height: 30px;
border: none;
border-radius: 100%;
line-height: 30px;
color: #fff;
background-color: #999;
transition: all 0.25s ease;
}
.carousel-indicators-numbers li.visited, .carousel-indicators-numbers li:hover, .carousel-indicators-numbers li.active {
margin: 0 2px;
width: 30px;
height: 30px;
background-color: red;
}
HTML:
<ol class="carousel-indicators carousel-indicators-numbers">
<li data-target="#myCarousel" data-slide-to="0" class="active">1</li>
<li data-target="#myCarousel" data-slide-to="1">2</li>
<li data-target="#myCarousel" data-slide-to="2">3</li>
</ol>
In the following code I've found that the div size doesn't equal at the top and bottom of the ul.
The div still doesn't have equal size even though I put the padding equal.
What is wrong?
.footer {
background-color: #4dbce9;
padding: 40px 0;
text-align: center;
color: #fff;
}
.footer ul,
li {
display: inline-block;
}
.footer a {
font-size: 14pt;
padding-right: 20px;
color: #fff;
}
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<ul>
<li>
<a href="https://www.facebook.com/rony.fhebrian" />Facebook
</li>
<li>
<a href="https://www.twitter.com/ronyfhebrian" />Twitter
</li>
<li>
<a href="https://ronyfhebrian.wordpress.com" />Blog
</li>
<li>
<a href="mailto:rony.fhebrian#outlook.com">Contact
</li>
</ul>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
The <a> closing tag is missing.
.footer {
background-color: #4dbce9;
padding: 40px 0;
text-align: center;
color: #fff;
}
.footer ul,
li {
display: inline-block;
}
.footer a {
font-size: 14pt;
padding-right: 20px;
color: #fff;
}
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<ul>
<li>
Facebook
</li>
<li>
Twitter
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
Your ul element should look like this :
<ul>
<li>
Facebook
</li>
<li>
Twitter
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
the 'a' link tag is not self closing
try to close the <a>tags ..
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<ul>
<li>
<a href="https://www.facebook.com/rony.fhebrian" />Facebook</a>
</li>
<li>
<a href="https://www.twitter.com/ronyfhebrian" />Twitter</a>
</li>
<li>
<a href="https://ronyfhebrian.wordpress.com" />Blog</a>
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
I've got such header on the page
But I want to align it like this
How to do that? My html code looks like this
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(function() {
$("#mytab a:last").tab("show")
});
</script>
<style>
.blackie {
background: black;
color: white;
}
.header {
font-size: 25px;
}
.column {
text-align: center;
}
.line {
border-right: 1px solid white;
}
</style>
</head>
<body>
<div class="row blackie">
<div class="col-md-1">
<img src="eng.png" width="40px" height="40px"/>
</div>
<div class="col-md-2 header">Admin</div>
<div class="col-md-1 col-md-offset-3">
<span class="line"></span>
</div>
<div class="col-md-2">
email
</div>
<div class="col-md-1">
<span class="line"></span>
</div>
<div class="col-md-1 column">
<span class="logout">
Log out
</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs" role="tablist" id="mytab">
<li class="active">Liabilities</li>
<li>Events</li>
<li>Reports</li>
<li>Admin</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<p>Liabilities</p>
</div>
<div id="tab2" class="tab-pane">
<p>Events</p>
</div>
<div id="tab3" class="tab-pane">
<p>Reports</p>
</div>
<div id="tab4" class="tab-pane">
<p>Admin</p>
</div>
</div>
</div>
</div>
</body>
</html>
Here you are http://jsfiddle.net/7ky948j3/2/embedded/result/
You have the problem with padding, every col-md class has padding left nad right 15px, the image in the first col is smaller than the width of the col-md-1 class so it pushes the admi further to the right. If you add the image and Admin in the same col-md the problem will be fixed
<div class="col-md-3 header">
<img src="eng.png" width="40px" height="40px" /> Admin
</div>
Use CSS Pseudo classes which makes your work easy. here your output
use first-child Pseudo class for these need
here the html
<div class="row blackie">
<div class="col-md-1 col-sm-1">
<img src="eng.png" width="40px" height="40px"/>
</div>
<div class="col-md-11 col-sm-11 col-xs-11"> <!-- cols depends upon ur nees" -->
<ul class="main-head">
<li>
Admin
</li>
<li>
Email
</li>
<li>
logout
</li>
</ul>
</div>
</div>
and the css
ul.main-head{
display:inline-block;
width:100%;
padding:0px;
margin:0px;
vertical-align:middle;
}
ul.main-head:after{
clear:both;
content:" " ;
display:table;
}
ul.main-head li{
float:right; //floats every element to right side
text-align:right;
list-style:none;
}
ul.main-head li:first-child{
float:left; //make the first element to float left
}
ul.main-head li a{
color:#fff;
}
and line-heights and left right margins as your need to 'li' of the topbar for better results.
I have some problem in bootstrap, I develope website but after completation of website client say they dont want to responsive website.
So, I first fix the .container width to 960px !important;
It will works..!! But Problem is I am also using .row class every where row class is making responsiveness which its contains..
I want 100% width background at footer but when I resize browser & scroll horizontally it will removes the background color.
What can I do...
See Website : Snapshot 1
When browser resize then see Whats the problem occure : Snapshot 2
my html code is written in bootstrap 3 :
<footer>
<div class="row footercolor">
<div class="container">
<div class="row">
<div class="col-xs-2 ">
<div class="row">
<h5 class="undr footertitle">Lorem Ipsum</h5>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<h5 class="undr footertitle">QUICK LINKS</h5>
<div class="col-xs-6">
<ul class="footerlist list-group">
</ul>
</div>
<div class="col-xs-6">
<ul class="footerlist list-group">
</ul>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="row">
<h5 class="undr footertitle">OUR NEIGHBORHOODS</h5>
<div class="col-xs-6">
<ul class="footerlist list-group">
</ul>
</div>
<div class="col-xs-6">
<ul class="footerlist list-group ">
</ul>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="row">
<h5 class="undr footertitle">GET WEEKLY LISTING UPDATES</h5>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon btn-ftrbtn">Add Me</span>
</div>
</div>
<div class="row"><br/></div>
<div class="row">
<ul class="list-unstyled list-inline pull-right">
<li><img src="img/fb.png"></li>
<li><img src="img/twitter.png"></li>
<li><img src="img/pintrest.png"></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- /container -->
</footer>
& My CSS Code is :
.footercolor {
background-color: #5e6872;
}
.footer{color:#c6c6c9}
.footertitle {
font-family: 'myriad_prosemibold_condensed' !important;
font-size: 13px!important;
color: #fff !important;
letter-spacing: 0.5px;
}
.footerlist li a {
font-family: 'myriad_prolight_semicondensed' !important;
font-size: 12px!important;
color: #c6c6c9 !important;
text-decoration: none
}
.footerlist li a:hover {
color: #fff !important;
cursor: pointer
}
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.container{min-width:960px !important;}
At the last Please Give me solution for that...
Any Help will be appreciated...
Add the below code to your CSS file will fix the issue.
html, body {
min-width:960px;
}
You have incorrect markup for bootstrap mate....
Use container > row > span
Instead of :
<div class="row footercolor">
<div class="container">
Order should be :
<div class="container footercolor"> <!-- notice the reverse order now -->
<div class="row ">