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.
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 these 2 divs, and inside them, the 2 with some lists. What i want, is that the first div or ul content, is to be on the left side in the container div, and the second, to go to the right side of the container.
I tried giving the -s text-left and text-right classes, but nothing happend.
<div class="header_full_width">
<div class="container">
<div class="row">
<div class="col-md-6">
<ul class="header_links_ul">
<li class="float-left">Vásárlási információk</li>
<li class="float-left">Szállítás</li>
<li class="float-left">Kapcsolat</li>
</ul>
</div>
<div class="col-md-6">
<ul class="header_links_ul">
<li class="float-left">Regisztráció</li>
<li class="float-left">Bejelentkezés</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
.header_full_width{ widows:100%; background:#fff; border-bottom:1px solid #ccc; }
.header_links_ul{ list-style:none; margin:0; padding:0;}
.header_links_ul li { display:block; }
.header_links_ul li a{ color:#000; font-size:12px; display:block;}
I get no error. You can see on the photo, what i want to do.
Thanks!
Add float-right on second col-md-6 ul li
<div class="col-md-6">
<ul class="header_links_ul">
<li class="float-right">Regisztráció</li>
<li class="float-right">Bejelentkezés</li>
</ul>
</div>
https://jsfiddle.net/lalji1051/kn23c8jp/2/
add flex display to your .header_links_uldiv like this:
div to left add class: justify-content-start
div to right add class: justify-content-end
.header_full_width{ widows:100%; background:#fff; border-bottom:1px solid #ccc; }
li { list-style-type:none }
li a{ color:#000; font-size:12px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header_full_width">
<div class="container">
<div class="row">
<div class="col-md-6 col-12">
<ul class=" d-flex justify-content-center justify-content-md-start">
<li>Vásárlási információk</li>
<li>Szállítás</li>
<li>Kapcsolat</li>
</ul>
</div>
<div class="col-md-6 col-12">
<ul class= "d-flex justify-content-center justify-content-md-end">
<li>Regisztráció</li>
<li>Bejelentkezés</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
In CSS class float-left add style left:0 !important for Regisztráció.
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
display: inline-block;
padding: 10px 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="header_full_width">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 text-md-left text-sm-center text-center">
<ul class="header_links_ul">
<li>Vásárlási információk</li>
<li>Szállítás</li>
<li>Kapcsolat</li>
</ul>
</div>
<div class="col-md-6 col-sm-12 text-md-right text-sm-center text-center">
<ul class="header_links_ul">
<li>Regisztráció</li>
<li>Bejelentkezés</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</body>
</html>
text-align can do the work way more easily. Also you can alignment change on other views. I have kept centered align on small and extra small devices, you can check that out! Hope it'll help
try this code simple
HTML
<div class="header_full_width">
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-6 col-lg-6">
<ul class="header_links_ul">
<li class="">Vásárlási információk</li>
<li class="">Szállítás</li>
<li class="">Kapcsolat</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-6 col-lg-6">
<ul class="header_links_ul">
<li class="">Regisztráció</li>
<li class="">Bejelentkezés</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
css
.header_full_width{ widows:100%; background:#fff; border-bottom:1px solid #ccc; }
.header_links_ul{ list-style:none; margin:0; padding:0;}
.header_links_ul li { display:block; }
.header_links_ul li a{ color:#000; font-size:12px; display:block;}
Using flex
.header_full_width{ widows:100%; background:#fff; border-bottom:1px solid #ccc; }
.header_links_ul{ list-style:none; margin:0; padding:0;}
.header_links_ul li { display:block; }
.header_links_ul li a{ color:#000; font-size:12px; display:block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header_full_width">
<div class="container">
<div class="row">
<div class="col-6">
<ul class="header_links_ul d-flex flex-column flex-sm-row justify-content-start">
<li>Vásárlási információk</li>
<li>Szállítás</li>
<li>Kapcsolat</li>
</ul>
</div>
<div class="col-6">
<ul class="header_links_ul d-flex flex-column flex-sm-row justify-content-end">
<li>Regisztráció</li>
<li>Bejelentkezés</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
i'm getting horizontal scroll bar when resizing the browser to 796px or less i'v tried to delete the sections one by one to find which one gives that issue but it didn't resolve it then i tried to delete some code starting from section products-4 to the end of the code and it's solved then i started to delete the sections one by one from products-4 to the end but that didn't help i don't know what's the link between them to make that scroll appear and when try to test using google chrome device toolbar it gives white space on the right side with mobile screen resolution so i'v tried to delete any css code has any relationship with size for products-4 or for any other section below it but nothing happened so i hope you guys can help me to find where the problem is
/* Products-4 */
#products-4{
background-color: #000;
margin-top:20px;
color:darkred;
}
#products-4 img{
border:1px solid white;
border-radius:10px;
padding:5px;
}
.col-centered{
float: none;
margin: 0 auto;
}
#products-4 h2 {
text-align:center;
}
#products-4 p{
text-align:center;
}
/* Team */
#team h2{
text-align:center;
}
#team{
text-align:center;
}
#team img{
border:1px solid black;
}
/* Contact */
#contact{
background-color: #000;
}
#contact .container{
height:500px;
}
.tab-content{
padding:50px;
border:1px solid white;
}
.tab-content .tab-content-inside{
padding:50px 0;
}
.tab-content .tab-content-inside a{
color:white;
text-decoration: none;
}
.tab-content .tab-content-inside .btn{
margin-top:30px;
}
.tab-content .tab-content-inside .btn-info{
margin-left:50px;
}
.tab-content .tab-content-inside .btn-info a{
padding-right:10px;
padding-left:10px;
}
.nav-tabs li a{
background-color: transparent !important;
color:red;
}
.nav-tabs .active a{
color:white !important;
}
.nav-tabs .active a:hover{
color:cornflowerblue !important;
}
.nav-tabs li a:hover{
background-color:white !important ;
color:cornflowerblue;
transition : all 1s;
-webkit-transition : all 1s;
-moz-transition : all 1s;
-o-transition : all 1s;
}
<!-- Strart of products-4 -->
<section id="products-4">
<div class="container">
<div class="row">
<h1 class="text-center">More Products</h1>
<div class="row">
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-centered">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
</div>
</div>
</section>
<!-- End of Products-4-->
<!--Start of Team -->
<section id="team">
<div class="container">
<div class="row">
<h1>Our Team</h1>
<div class="col-md-4 col-md-offset-2">
<img src="img/face.png" class="img-circle" alt="">
<h2>The Manager</h2>
<p>Any pragraph here</p>
</div>
<div class="col-md-4">
<img src="img/face.png" class="img-circle" alt="">
<h2>The Sales Man</h2>
<p>Any pragraph here</p>
</div>
</div>
</div>
</section>
<!-- End Of Team -->
<!-- Start of contact -->
<section id="contact">
<div class="container">
<div class="row">
<h1>Contact Us</h1>
<div class="row">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#e-mails">E-mails</a>
</li>
<li>
<a data-toggle="tab" href="#phones">Phones</a>
</li>
<li>
<a data-toggle="tab" href="#address">Address</a>
</li>
<li>
<a data-toggle="tab" href="#social">Social Networks</a>
</li>
</ul>
<div class="tab-content">
<div id="e-mails" class="tab-pane fade in active">
<div class="tab-content-inside text-center">
<h1>Feel Free To Text Us Any Time Using This E-Mails</h1>
<div class="tab-content-content">
<button type="button" class="btn btn-primary">
<span class="fa fa-envelope-o fa-2x">
Manager
</span>
</button>
<button type="button" class="btn btn-info">
<span class="fa fa-envelope-o fa-2x">
Sales
</span>
</button>
</div>
</div>
</div>
<div id="phones" class="tab-pane fade">
All Phones Goes here
</div>
<div id="address" class="tab-pane fade">
Address Comes here
</div>
<div id="social" class="tab-pane fade">
Social Addresses goes here
</div>
</div>
</div>
</div>
</div>
</section>
<!--end of contact-->
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 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 ">