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>
Related
Look at my screenshot, How can I move these two elements in the center.
The elements are .
I did almost anything but not working.
Anybody could help? Text-align: center not working either
.setup-box {
margin-left: 1em;
}
.treeview-box-title {
padding-top: .5em;
margin-top: 1.5em;
}
.treeview-container {
display: flex;
justify-content: space-between;
}
.treeview-ul {
margin: 0 1em 0 1.5em;
text-align: left;
}
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="setup-box">
<h4 class="treeview-box-title">Windows</h4>
<div class="treeview-container">
<ul class="treeview-ul">
<li>
Download Application
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="setup-box">
<h4 class="treeview-box-title">Android</h4>
<div class="treeview-container">
<ul class="treeview-ul">
<li>Google PlayStore</li>
</ul>
</div>
</div>
</div>
</div>
add to your div.row d-flex and justify content:
<div class="row mx-auto d-flex justify-content-center">
.setup-box {
margin-left: 1em;
border:1px solid blue;
border-radius:0.5em;
}
.m-g-b{
margin-bottom:20px;
}
.windows-header{
border-bottom:1px solid blue;
}
.android-header{
border-bottom:1px solid blue;
}
.treeview-box-title {
text-align:center;
}
.treeview-container {
display: flex;
padding:0.1em;
}
.treeview-ul {
text-align: left;
}
<div class="row m-g-b">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="setup-box">
<div class="windows-header">
<h4 class="treeview-box-title">Windows</h4>
</div>
<div class="treeview-container">
<ul class="treeview-ul">
<li>
Download Application
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<div class="setup-box">
<div class="android-header">
<h4 class="treeview-box-title">Android</h4>
</div>
<div class="treeview-container">
<ul class="treeview-ul">
<li>Google PlayStore</li>
</ul>
</div>
</div>
</div>
</div>
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>
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;
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 ">