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 ">
Related
I have a small issue. I am trying to create a Treeview of a number of categories pulled out of the database. These categories should be placed next to each other (with a little space between them). Have been trying quite some css styling etc, but always get those categories underneath each other, no matter what I try it seems. Also cleared my cache several times without success. Does anyone have an idea on how to get this done ? It is dynamically, so it can be that there are 2, 3 or more categories to be displayed next to one other. Those categories should have a Treeview of corresponding subcategories and documents which is not yet coded.
My relevant code so far :
<div class="d-flex two-column-wrapper" id="twocols-wrapper">
<main class="instruments-wrapper">
<div class="card bg-light col-md-6 offset-md-3">
<div class="card-header row align-items-center">
<h3 class="text-center"><?=$this->instrument->name?></h3>
</div>
<div class="content-wrapper">
<div class="content">
<?php foreach ($this->categories as $category):?>
<div class="category">
<li class='active'><?=$category->name?></li>
</div>
<?php endforeach;?>
</div>
</div>
</div>
</main>
</div>
And in CSS :
content{
width: auto;
position: fixed;
overflow: visible;
}
.category{
width: 200px;
display: inline-block;
float: left;
}
Any help is much appreciated !
You need to use the display: inline-block; CSS property on the <li> element. Like so...
<div class="d-flex two-column-wrapper" id="twocols-wrapper">
<main class="instruments-wrapper">
<div class="card bg-light col-md-6 offset-md-3">
<div class="card-header row align-items-center">
<h3 class="text-center">Drum</h3>
</div>
<div class="content-wrapper">
<div class="content">
<div class="category">
<li class='active'>Snare</li>
<li class='active'>High-hat</li>
<li class='active'>Base</li>
<li class='active'>Cymbal</li>
</div>
</div>
</div>
</div>
</main>
</div>
CSS
.category li {
display: inline-block;
margin-right: 1em;
}
Working version here: https://jsfiddle.net/fraggley/wrox5198/7/
If you are using bootstrap 4, you can use d-display-block class:
content{
width: auto;
position: fixed;
overflow: visible;
}
.category{
width: 200px;
display: inline-block;
float: left;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="d-flex two-column-wrapper" id="twocols-wrapper">
<main class="instruments-wrapper">
<div class="card bg-light col-md-6 offset-md-3">
<div class="card-header row align-items-center">
<h3 class="text-center"><?=$this->instrument->name?></h3>
</div>
<div class="content-wrapper">
<div class="content">
<div class="category">
<li class='active d-inline-block'>AAA</li>
<li class='active d-inline-block'>BBBB</li>
<li class='active d-inline-block'>CCCC</li>
<li class='active d-inline-block'>DDDD</li>
</div>
</div>
</div>
</div>
</main>
</div>
Hi guys so i am using bootstrap and i have figured out how to put stuff on the right and left hand side of my footer, but i am not sure how to stick something in the middle
HTML:
<div class="footer">
<div class="container">
<div class="navbar-text pull-left">
<div class="logo1">
<p style="font-size: 24px; font-weight: 900; color: #F8BD23;">here</p>
<p>a,<br>
b,<br>
c,<br>
d<br></p>
</div>
</div>
<div class="navbar-text pull-right">
<i class="fa fa-facebook fa-2x"></i><i class="fa fa-instagram fa-2x"></i>
</div>
</div>
</div>
CSS:
.footer {
background-color: black;
padding-top: 10px;
}
.navbar-text > a {
color: #FFF;
padding: 5px;
}
.logo1 p {
color: #FFF;
margin-top: 2px;
}
Sorry just to clear up confusion, i want 3 columns basically So it should look like
Col 1 Col 2 Col 3
Fixed my own problem i guess just used a row and stuck 3 coloums in ,
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4"></div>
</div>
Had no idea i could use that in the footer, thanks again for the help x
Try like this:
Adding the "text-center" class to the container. So you will end up with this:
<div id="footer">
<div class="container text-center">
<p class="text-muted credit" style="color:#fff">xyz</p>
</div>
</div>
I have a below HTML code in which the images are purely responsive.
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(images/slide_1.jpg); width:100%;" border="0" alt="Null">
<div class="overlay-gradient"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Start Your Startup With This Template</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_3.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Take Your Business To The Next Level</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_2.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>We Think Different That Others Can't</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
</ul>
</div>
In this, the slide_1.jpg image is responsive. What I want is, I want to replace this image with my actual Image.
I tried changing the image by giving width:100% but the Image was still getting stretched. Any idea, how to make that image responsive.
Update
and the css is below
#fh5co-hero .flexslider .slider-text > .slider-text-inner {
display: table-cell;
vertical-align: middle;
min-height: 700px;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
font-size: 70px;
font-weight: 400;
color: #fff;
}
#media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
font-size: 40px;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner .fh5co-lead {
font-size: 20px;
color: #fff;
}
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(/images/slide_1.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Start Your Startup With This Template</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_3.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Take Your Business To The Next Level</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_2.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>We Think Different That Others Can't</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
</ul>
</div>
If you change only the width to 100% it will stretch the image inside of it. Try adding height:auto; to the inline CSS in order for the image to scale correctly.
If that doesn't work, try replacing your background-image property with:
background: url(images/slide_1.jpg) no-repeat center center;
background-size: cover;
My pen: http://codepen.io/helloworld/pen/yyoJGR
Why is the white separater and the list-grouping flowing through the divs or the parent row?
<div class="container columnStyle">
<div class="row">
<div class="row-same-height">
<div class="col-xs-3 col-xs-height">
<img class="img-responsive" src="http://s7.postimg.org/agarkavmj/whoiswho.png"></img>
</div>
<div class="col-xs-9 col-xs-height" >
<div class="container">
<div class="row">
<div class="page-header">
<h1>Who is who
<p>
<small>Organization & Processes</small>
</p>
</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item">Org Charts </li>
<li class="list-group-item">GAM / KAM Charts</li>
<li class="list-group-item">Process flow</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
.columnStyle{
background: #006AB3;
}
Because you use the class .containermultiple times.
This class has a fixed width of 1170px;
.container {
width: 1170px;
}
you should have only 1 .containerfor the wrapper and then, inside of it, remove the other .container and just use .row
See it in action : http://codepen.io/anon/pen/ogeLRb
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.