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>
Related
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;
}
I have this code:
.navbar-default .navbar-nav>li>a {
width: auto;
/* width: 200px;*/
/* font-weight: bold;*/
}
.mega-dropdown {
position: static !important;
/* width: 100%;*/
}
.mega-dropdown-menu {
padding: 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 300;
line-height: 1.428571429;
color: #243C78;
white-space: normal;
}
.mega-dropdown-menu .dropdown-header {
color: #243C78;
font-size: 18px;
font-weight: 500;
}
.mega-dropdown-menu form {
margin: 3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
<section class="indexTop">
<div class="container">
<div class="row indexTopPadding">
<div class="col-xs-8 col-sm-12 col-md-12 col-lg-11 ">
<div class="topData">Poniedziałek, 11 października 2019</div>
</div>
<div class="col-xs-4 col-sm-12 col-md-12 col-lg-1">
<div class="topKontrast">
<img src="images/ikon2.png" class="img-responsive topIkonLeft topIkonLeft5">
<img src="images/ikon1.png" class="img-responsive topIkonLeft topIkonLeft5">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 topMargin15 visible-xs">
<div class="topSocialMedia">
<img src="images/ikon7.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR">
<img src="images/ikon3.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR">
<img src="images/ikon4.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR">
<img src="images/ikon5.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR">
<img src="images/ikon6.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-5 topMargin30R ">
<div class="logo">
<img src="images/logo.png" class="img-responsive ikonCenterR">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 topMargin10 hidden-xs">
<form method="post" name="contactformXX" class="form validate clearfix validate-form">
<div class="form-group ">
<div class="form-group has-feedback ">
<input type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" /> <span class="glyphicon glyphicon-search form-control-feedback glyphiconColor"></span> </div>
</div>
</form>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 topMargin15 hidden-xs">
<div class="topSocialMedia">
<img src="images/ikon7.png" class="img-responsive topIkonLeft topIkonLeft10">
<img src="images/ikon3.png" class="img-responsive topIkonLeft topIkonLeft10">
<img src="images/ikon4.png" class="img-responsive topIkonLeft topIkonLeft10">
<img src="images/ikon5.png" class="img-responsive topIkonLeft topIkonLeft10">
<img src="images/ikon6.png" class="img-responsive topIkonLeft topIkonLeft10">
</div>
</div>
</div>
</div>
</section>
<!-- END TOP-->
<!-- MENU-->
<div class="paddingMenuTop"></div>
<nav class="navbar navbar-default navbarDefaultMop ">
<div class="container">
<!-- navbar-fixed-top -->
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand visible-xs" href="#">MegaMenu</a></div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown menuMop"> Item xxx1
<ul class="dropdown-menu mega-dropdown-menu row dropdownMenuMop">
<div class="container topMenuColor">
<li class="col-sm-3">
<ul class="hideBullet">
<li class="dropdown-header hideBullet">Sprawy </li>
<li>pozycja 1</li>
<li>pozycja 2</li>
<li>pozycja 3</li>
<li>pozycja 4</li>
<li>pozycja 5</li>
<li class="dividerMop"></li>
<li class="dropdown-header hideBullet">pozycje 5</li>
<li>Bezpłatana imnformaja</li>
<li>dream</li>
<li>Callendar</li>
<li>Archiwum Mewspow</li>
</ul>
</li>
<li class="col-sm-3">
<ul class="hideBullet">
<li class="dropdown-header hideBullet">My life </li>
<li>Health</li>
<li>Bicycles</li>
<li>Cars</li>
<li>Education</li>
<li>Cash</li>
<li class="dividerMop"></li>
<li class="dropdown-header hideBullet">Fundation</li>
<li>xdcsdcsd cdscdscds</li>
<li>Magazine</li>
<li>Items</li>
<li>Items2</li>
</ul>
</li>
<li class="col-sm-3">
<ul class="hideBullet">
<li class="dropdown-header hideBullet">My life </li>
<li>Health</li>
<li>Bicycles</li>
<li>Cars</li>
<li>Education</li>
<li>Cash</li>
<li class="dividerMop"></li>
<li class="dropdown-header hideBullet">Fundation</li>
<li>xdcsdcsd cdscdscds</li>
<li>Magazine</li>
<li>Items</li>
<li>Items2</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Accessories</li>
<li>Default Navbar</li>
<li>Lovely Fonts</li>
<li>Responsive Dropdown </li>
<li class="dividerMop"></li>
<li class="dropdown-header">Newsletter</li>
<form class="form" role="form">
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email"> </div>
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</form>
<li class="dropdown-header">zamknij mnie2
<button type="button" class="close">×</button>
</li>
</ul>
</li>
</div>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</nav>
I have a problem with the menu (NAVBAR).
I would like it to descend with scrolling the page down (stuck to the top of the browser).
The effect that I would like to get is here: https://www.gdynia.pl
Dla mieszkańców, aktualności, dla turystów, o Gdyni,
Does anyone know how to improve my code to get this effect?
Prview: http://serwer1356363.home.pl/pub/menu_fixed/
You can add to .navbar some other class with style like this: position: fixed; top:0; and replace position:relative with position:fixed;.
- Add this class only after you scroll down some pixels.
- If you not scrolled some pixels use remove or don't add class.
- Use Javascript or JQuery to detect how many user already scrolled pixels and also to add or remove element class.
I think everything is clear here. I just opened your site and used chrome dev tools to see applied effects. Just play with code and styles. After apply changes in real code.
You can look more here: set div position to fixed after scrolling 100px?
I'm developing e-commerce site it is a college project, on that site I have filters and list of products. It works fine on laptop but when I open it on mobile, then the cards of product list comes under the filter. But I want to make it responsive and both columns should increase and decrease their size respective to screen size. I'm new in web-designing, please help me.
The class m is an empty class, i have just used it because with using it it gives nice look to all the contents.
#media screen and (max-width: 480px) {
section.slider {
padding-top: 0%;
}
.mini-menu .sub>ul {
height: 0;
overflow: hidden;
background: #fff;
}
.mini-menu .sub>ul>li>a {
font-family: sans-serif;
color: #FEFEFE;
font-size: 12px;
display: block;
text-decoration: none;
padding: .7em 1em;
text-transform: capitalize;
font-style: normal;
letter-spacing: 1px;
}
.cards {
background: #fff;
border-radius: 2px;
display: inline-block;
height: 50%;
margin: 1rem;
width: 97%;
position: relative;
text-align: center;
}
<div class="m">
<div class="col-md-2">
<div class="menu">
<div class="mini-menu">
<ul>
<li class="sub">
RAM<span style="float:right;"><i class="fa fa-chevron-down"></i></span>
<ul>
<li>
<input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
<label class="checkbox-label" for="checkbox1" style="color: #212121;">Less than 512 MB</label>
</li>
<li>
<input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
<label class="checkbox-label" for="checkbox1" style="color: #212121;">512 MB - 1 GB</label>
</li>
</ul>
</li>
<li class="sub">
BRAND<span style="float:right;"><i class="fa fa-chevron-down"></i></span>
<ul>
<li>
<input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
<label class="checkbox-label" for="checkbox1" style="color: #212121;">HP</label>
</li>
<li>
<input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
<label class="checkbox-label" for="checkbox1" style="color: #212121;">Dell</label>
</li>
</ul>
</li>
<li class="sub">
CUSTOMER RATINGS<span style="float:right;"><i class="fa fa-chevron-down"></i></span>
<ul>
<li>
<input class="filter" data-filter=".check1" type="checkbox" id="checkbox1">
<label class="checkbox-label" for="checkbox1" style="color: #212121;">4 <i class="fa fa-star"></i> & above</label>
</li>
</ul>
</li>
</ul>
</div>
<div class="menu-price menu-item">
<div class="header-item">Price<span style="float:right;"><i class="fa fa-chevron-down"></i></span></div>
<p>
<input type="text" readonly id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</div>
</div>
</div>
<div class="col-md-10">
<div class="cards card4">
<div class="carousel slide" id="myCarousel2" data-ride="carousel" data-interval="000" data-pause="hover">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<img src="computers/img/lenovo.png" alt=" " class="img-responsive" />
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel2" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel2" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="clearfix"></div>
</div>
<div class="cards card4">
<div class="carousel slide" id="myCarousel" data-ride="carousel" data-interval="000" data-pause="hover">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<img src="computers/img/dell.jpeg" alt=" " class="img-responsive" />
<p>
<br> Dell Core i3 6th Gen <br> Rs 29,990 <br>
</p>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
How can I change the color of that part to something else? I want that to be the same color as footer color.
How can I do that?
what css or html code do I need?
I am using bootstrap 3.
already tried :
How to put black color in the bottom of the page after footer
that does not work for me.
my html of _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
<div class="row">
<div class="col-md-12">
HEADER<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
sidebar
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
<div class="col-md-8">
<div class="col-md-12">
content1
#RenderBody()
</div>
<div class="col-md-12">
content2
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-static-top">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
FOOTER
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
<hr />
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</div>
</div>
<footer class="navbar-default">
<div class="container">
<div class=”row bottom-rule”>
<div class="col-sm-4 footer-section">
<strong>Connect with Best Store</strong>
<p>Email promotions, news, and information</p>
<form class="form-inline">
<div class="form-group">
<label class="sr-only"
for="inputEmail">Email</label>
<input type="email"
class="form-control"
id="inputEmail"
placeholder="address#example.com">
</div>
<button type="submit" class="btn btn-default">Subscribe</button>
</form>
</div>
<div class="col-sm-5 footer-section">
<ul class="list-inline">
<li class="text-uppercase">Customer Service:</li>
<li>Returns</li>
<li>Privacy Policy</li>
<li>Our Guarantee</li>
<li>Shipping</li>
<li>Product Guides</li>
<li>Customer Care</li>
</ul>
<ul class="list-inline">
<li class="text-uppercase">Social Media & Articles:</li>
<li>Instagram</li>
<li>Pinterest</li>
<li>Twitter</li>
<li>Facebook</li>
<li>The Best Journal</li>
</ul>
<ul class="list-inline">
<li class="text-uppercase">Events:</li>
<li>Hangout April 30</li>
<li>Makers Faire</li>
</ul>
</div>
<div class="col-sm-3">
<address>
<strong>Best Store</strong><br>
1000 Some Fantastic Place<br>
San Francisco, CA 94103<br>
(123) 456-7890 (phone & text)<br>
Contact Us
</address>
</div>
</div>
<div class="row bottom-rule">
<div class="col-sm-12">
<nav class="navbar navbar-default navbar-footer">
<ul class="nav navbar-nav">
<li>Customer Care</li>
<li>Summer Lookbook</li>
<li>Gift Cards</li>
<li>About Best Store</li>
<li>Careers</li>
<li>Contact Us</li>
<li>The Best Journal</li>
</ul>
</nav>
</div>
</div><!-- end row -->
<div class="row leg-room">
<div class="col-md-12 text-center">
<h1 class="text-uppercase">Best Store</h1>
<p class="monospaced">
©2016 Best Store Company Inc.
<span class="text-uppercase">All Rights Reserved</span>
</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</footer>
</body>
</html>
Site.css:
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
/* my */
.bottom-rule {
border-bottom: 1px solid lightgray;
}
footer {
padding-top: 20px;
border-top: 10px solid #332e20;
background-color: white;
}
.footer-section {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid lightgray;
}
#media (min-width: 768px) {
.footer-section {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
}
footer .list-inline li:not(:first-child):not(:last-child) {
border-right: 1px solid lightgray;
}
.navbar-footer {
background-color: inherit;
border-radius: 0;
border: none;
}
.navbar-footer {
margin-bottom: 0;
text-align: center;
}
footer .navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.leg-room { margin-bottom: 20px; padding-bottom: 20px; }
.monospaced { font-family: 'Ubuntu Mono', monospaced ; }
using visual studio 2015.
PS: I don't want to change the color of the background of the body to black! – user2548663 7 secs ago
Try setting the background color of the body to black:
In your css change:
body {
padding-top: 50px;
padding-bottom: 20px;
background: #000;
}
I have a search box and i want it to overlay on the carousel. Like how it is displayed in the image. I am able to achieve it by positioning the search box Absolute. But it's not responsive. As the width reduces it doesn't stay inside the carousel. How do I make it responsive ??
Here's my code.
<div class="container-fluid search_bar">
<row>
<div class="col-xs-7 search">
<div class="navbar nav1" role="navigation">
<div class="navbar-header">
<form class="navbar-form form1 " role="search">
<div class="">
<input type="text" class="form_input" placeholder="Type Hospital Name" style="float:left; width: 27%; margin-top: 0; margin-right: 3%;" name="srch-term" id="srch-term">
<select style="float: left; padding: 1px; width: 27%; margin-right: 3%;" class="selectbox1 form_input" >
<option> Speciality </option>
<option> Search in Health Packages </option>
<option> Search in Diagnostic Centres </option>
<option> Search in Doctors </option>
<option> Search in Tests </option>
</select>
<input type="text" class="form_input" placeholder="Type Location" style="float:left; width: 27%; margin-right: 6" name="srch-term" id="srch-term">
<button class="form_button" style="padding: 4px;" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</form>
</div></div></div>
<div class="col-xs-5" style="border: none !important; ">
<div class="social-media">
<ul class="list-unstyled list-inline">
<li> <img src="images/facebook.png" class="img-responsive" style="cursor: pointer;"/> </li>
<li> <img src="images/twitter.png" class="img-responsive" style="cursor: pointer;"/> </li>
<li> <img src="images/google.png" class="img-responsive" style="cursor: pointer;"/> </li>
</ul>
</div>
</div>
</row>
</div>
<div class="col-xs-12">
<div id="myCarousel" class="carousel slide slider" data-ride="carousel">
<!-- Indicators
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol> -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/homeimage1.jpg" class="img-responsive" >
</div>
<div class="item">
<img src="images/homeimage1.jpg" class="img-responsive" >
</div>
<div class="item">
<img src="images/homeimage1.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/homeimage1.jpg" class="img-responsive">
</div>
</div>
<!-- Left and right controls -->
<div class="right carousel-control" style="right: -5%; cursor: pointer;" href="#myCarousel" data-slide="next">
<span> <img src="images/right.png" class="img-responsive"/></span>
</div>
<div class="left carousel-control" style="left: 4%; cursor: pointer;" href="#myCarousel" data-slide="prev">
<span> <img src="images/left.png" class="img-responsive"/></span>
</div>
</div>
</div>
here's the CSS
.search_bar {
position: relative;
top: 91px;
left: 10%;
/* margin-left: -0.5%; */
}
.search_bar1 {
position: absolute;
z-index: 3;
margin-top: 8%;
margin-left: 10% !important;
}
#media (max-width: 768px) {
.search_bar1 {
margin-top: 0;
}
}
There is quite a lot of content being displayed within the seach bar and this causes a problem on smaller devices, so I have implemented a possible solution for you here. Basically, on a small display, the search bar will re-position itself under the carousel. You should find that the search bar reacts responsively as the display size changes. I have adjusted your social media icons to sit in a new row below the search options as I think it makes better use of the available space. Of course, it is difficult to know exactly what your requirements are here but I hope this helps. Any questions please let me know.
.navbar-header { width:100%; }
.search_bar {
width:50%;
position: absolute;
z-index:1;
top: 91px;
left: 5%;
/* margin-left: -0.5%; */
}
.search_bar select, .search_bar input, .search_bar button { float:left; margin-top:2px; }
#media (max-width: 500px) {
.search_bar {
position:relative;
top:0;
left:0;
width:100%;
}
}
<div class="col-xs-12">
<div id="myCarousel" class="carousel slide slider" data-ride="carousel">
<!-- Indicators
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol> -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/homeimage1.jpg" class="img-responsive" >
</div>
<div class="item">
<img src="images/homeimage1.jpg" class="img-responsive" >
</div>
<div class="item">
<img src="images/homeimage1.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/homeimage1.jpg" class="img-responsive">
</div>
</div>
<!-- Left and right controls -->
<div class="right carousel-control" style="right: -5%; cursor: pointer;" href="#myCarousel" data-slide="next">
<span> <img src="images/right.png" class="img-responsive"/></span>
</div>
<div class="left carousel-control" style="left: 4%; cursor: pointer;" href="#myCarousel" data-slide="prev">
<span> <img src="images/left.png" class="img-responsive"/></span>
</div>
</div>
<div class="container-fluid search_bar">
<div class="row">
<div class="col-xs-12 search">
<div class="navbar nav1" role="navigation">
<div class="navbar-header">
<form class="navbar-form form1 " role="search">
<div class="">
<input type="text" class="form_input" placeholder="Type Hospital Name" style="margin-top: 0; margin-right: 3%;" name="srch-term" id="srch-
term">
<select style="float: left; padding: 3px; margin-right: 3%;" class="selectbox1 form_input" >
<option> Speciality </option>
<option> Search in Health Packages </option>
<option> Search in Diagnostic Centres </option>
<option> Search in Doctors </option>
<option> Search in Tests </option>
</select>
<input type="text" class="form_input" placeholder="Type Location" style="margin-right:3%;" name="srch-term" id="srch-term">
<button class="form_button" style="padding: 4px;" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12" style="border: none !important; ">
<div class="social-media">
<ul class="list-unstyled list-inline">
<li> <img src="images/facebook.png" class="img-responsive" style="cursor: pointer;"/> </li>
<li> <img src="images/twitter.png" class="img-responsive" style="cursor: pointer;"/> </li>
<li> <img src="images/google.png" class="img-responsive" style="cursor: pointer;"/> </li>
</ul>
</div>
</div>
</div>
</div>
</div>