I want to align the left column to the left and the right column to the right while keeping them vertically aligned. I've seen several questions about this and I can get this to work if I don't include the "col-sm-6" since those items are floated it's giving me issues, I am looking for a work around but sticking to the Bootstrap layout.
<header>
<div class="container">
<div style="display:table-row;" class="row">
<div style="display:table-cell; vertical-align:middle; text-align:left;" class="col-sm-6">
Left Column Text
</div>
<div style="display:table-cell; vertical-align:middle; text-align:right;" class="col-sm-6">
<div class="list">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
</div>
</div>
</div>
</header>
The questions is answered and the below methods do work but here is also another ready made solution: http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height
Here you go, you can achieve it with flex and align-items:center and keeping the bootstrap framework.
HTML
<div class="container">
<div class="row sm-flex-center">
<div class="col-sm-6">
Left Column Text
</div>
<div class="col-sm-6 pull-right">
<div class="list">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
</div>
</div>
</div>
CSS
.flex-center {
display:flex;
align-items:center;
}
#media ( min-width:768px ) {
.sm-flex-center {
display:flex;
align-items:center;
}
}
#media ( min-width: 992px ) {
.md-flex-center {
display:flex;
align-items:center;
}
}
#media ( min-width: 1200px ) {
.lg-flex-center {
display:flex;
align-items:center;
}
}
Fiddle With Flex
If Not big fan of flex like me, use table
HTML
<div class="container">
<div class="row table-center">
<div class="col-md-6 col-sm-6 middle">
Left Column Text
</div>
<div class="col-md-6 col-sm-6 middle pull-right">
<div class="list">
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
</div>
</div>
</div>
CSS
.table-center {
display: table;
width: 100%;
height: 100%;
min-height: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
float:none;
}
Fiddle With Table
Related
I created a row in footer and it's giving me extra unwanted space of same color as footer , in inspect it's showing of after element automatically created after creation of row.
When i try to remove it by margin top:-12rem; it gets removed but all the row's are disturbed . But it gives no response to specific id or class.
.page-footer {
/* position: relative; */
width: 100%;
background-color: black!important;
text-align: center;
min-width: 640px;
}
#frow {
min-width: 640px;
margin-top: -15rem!important;
text-align: center;
}
<div class="page-footer ">
<div class=" row " style="margin-top: -13rem;" id="frow">
<div class="col l4 s12 m4">
<h5>About CLub</h5>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<div class="col l4 s12 m4">
<h5>Memberships</h5>
<ul>
<li> Join</li>
<li> Renew</li>
<li> Benifits</li>
<li> IEEE Collaboration</li>
</ul>
</div>
<div class="col l4 s12 m4">
<h5>Grow With Us</h5>
<ul>
<li>Careers</li>
<li>About Us</li>
<li>Contact Us</li>
<li>get involved</li>
</ul>
</div>
</div>
<div style="color: white;text-align: center; ">
<p>We'll your encourage ideas and shape your future </p>
</div>
<div style="color: white;text-align: center; ">
<i class="fab fa-facebook"> </i>
<i class="fab fa-instagram"> </i>
<i class="fab fa-twitter"> </i>
</div>
</div>
Try to remove the div and try to use section as your tag .So that the class will be enclosed in section tag in.It might be useful instead of div or better still use paragraph tag it will be a lot more useful for you.
Sorry if this has been asked before, but I've looked at several other similar questions trying to incorporate the solution with little success. I have a bootstrap row with two col-md-6's. In the first column is the image, and in the second column is a list . What i would like to do is vertically center the list relative to the image.
Here is what my HTML looks like:
<div class="row ">
<div class="col-md-6">
<img class="img-responsive" src="500-by-700-image.jpg" >
</div> <!-- col-md-6 -->
<div class="col-md-6" >
<h4 style="font-size: 20px; line-height: 2; ">
My heeader:
<br>
<ul style="text-align: left; ">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</h4>
</div> <!-- col-md-6 -->
</div> <!-- row -->
Any idea on how I can accomplish this, thanks.
Looking around I managed to find this bit of code that works:
<!-- CSS -->
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
<!-- HTML -->
<div class="row ">
<div class="col-md-6 vcenter"> <!-- NEW -->
<img class="img-responsive" src="500-by-700-image.jpg" >
</div> <!-- col-md-6 -->
<div class="col-md-6 vcenter" > <!-- NEW -->
<h4 style="font-size: 20px; line-height: 2; ">
My heeader:
<br>
<ul style="text-align: left; ">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</h4>
</div> <!-- col-md-6 -->
</div> <!-- row -->
try this. it works for me....
you must add this css to your code:
.col-md-6 ul{
height:inherit;
display: table-cell;
vertical-align:middle;
width: 100%;
}
The question title is pretty much what i want to know.
How do I keep the title1,2,3 over the list and not in the left of it.
Do i need to add more classes?
.row {
display: flex;
}
<div class="row">
<h1>title1</h1>
<ul>
<li>listItem1</li>
<li>listItem2</li>
<li>listItem3</li>
</ul>
<h1>title2</h1>
<ul>
<li>listItem1</li>
<li>listItem2</li>
<li>listItem3</li>
</ul>
<h1>title3</h1>
<ul>
<li>listItem1</li>
<li>listItem2</li>
<li>listItem3</li>
</ul>
</div>
One easy solution is to add extra class called column (whith extra div tags) where you change the flex direction :
.row {
display: flex;
}
.column {
display: flex;
flex-direction: column;
}
<div class="row">
<div class="column">
<h1>title1</h1>
<ul>
<li>listItem1</li>
<li>listItem2</li>
<li>listItem3</li>
</ul>
</div>
<div class="column">
<h1>title2</h1>
<ul>
<li>listItem1</li>
<li>listItem2</li>
<li>listItem3</li>
</ul>
</div>
<div class="column">
<h1>title3</h1>
<ul>
<li>listItem1</li>
<li>listItem2</li>
<li>listItem3</li>
</ul>
</div>
</div>
how I can center this top menu in css:
I have this html structure:
<div class="wrapper_menu_hoz">
<div class="container_24 ">
<div class="grid_24 em-area05">
<div class="nav-container">
<ul id="nav">
</ul>
</div>
</div>
</div>
</div>
there are a number of ways to do this. it also depends on what code you have on the rest of the items, but basically this is the way to do it :
see snippet
ul {
text-align:center;
display: block;
margin: 0 auto;
padding:0;
width:100%;
}
ul > li {
display: inline-block;
padding:0 15px;
}
<div class="wrapper_menu_hoz">
<div class="container_24 ">
<div class="grid_24 em-area05">
<div class="nav-container">
<ul id="nav">
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
</ul>
</div>
</div>
</div>
</div>
I suggest to add margin: 0 auto; to nav element, remember that his parent must be on 100% width of the body
I hope you can all help :)
I have a sidebar on my website but because I don't want it going under the fold I would like to split this ten li sidebar into two 5 li sidebars with a div inbetween them showing content using Jquery. I have coded up the website so it looks good but I need the sidebars to act as one menu instead of two so only one selection can be made at a time , one current class etc. Anyone know how to do this? My mark-up is as follows:
<div id="sidebar">
<ul class="list2"><em>
<li class="current1">Bilgorajski</li>
<li>Rzeszowski</li>
<li>Kasuby</li>
<li>Mazur</li>
<li>Lubelski</li>
</em>
</ul>
</div>
<div id="repcontent">
</div>
<div id="sidebar">
<ul class="list2"><em>
<li>Powislainski</li>
<li>Podhalainski</li>
<li>Kujuwiak Oberek</li>
<li>Krakowiak</li>
<li>Szlansk</li>
</em>
</ul>
</div>
You just have to remove tags that commented in the following code:
<div id="sidebar">
<ul class="list2"><em>
<li class="current1">Bilgorajski</li>
<li>Rzeszowski</li>
<li>Kasuby</li>
<li>Mazur</li>
<li>Lubelski</li>
</em>
</ul>
<!-- </div> -->
<div id="repcontent">
</div>
<!-- <div id="sidebar"> -->
<ul class="list2"><em>
<li>Powislainski</li>
<li>Podhalainski</li>
<li>Kujuwiak Oberek</li>
<li>Krakowiak</li>
<li>Szlansk</li>
</em>
</ul>
</div>
Edited: To get three columns layout, I will use zurb-foundation CSS framework as follows:
<body>
<div id="header" class="row">
<div class="twelve columns">
Header
</div>
</div>
<div class="row">
<div id="left-sidebar" class="three columns">
<ul class="list2"><em>
<li class="current1">Bilgorajski</li>
<li>Rzeszowski</li>
<li>Kasuby</li>
<li>Mazur</li>
<li>Lubelski</li>
</em>
</ul>
</div>
<div id="repcontent" class="six columns">
Middle contents
</div>
<div id="right-sidebar" class="three columns">
<ul class="list2"><em>
<li>Powislainski</li>
<li>Podhalainski</li>
<li>Kujuwiak Oberek</li>
<li>Krakowiak</li>
<li>Szlansk</li>
</em>
</ul>
</div>
</div>
</body>
take it easy.. use
-webkit-column-count: 2;
this will splits your contents into two columns..Or if you want to display the sidebars in two sides separately then use 2 separate divisions and float:left|right; property. Or you can query for this using JQuery.
<body>
<div class="container">
<div class="sidebar1">
<ul class="nav">
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
<p> </p>
<!-- end .sidebar1 --></div>
<div class="content">
<!-- end .content --></div>
<div class="sidebar2">
<!-- end .sidebar2 --></div>
<!-- end .container --></div>
</body>
css
.sidebar1 {
float: left;
width: 20%;
background-color: #93A5C4;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 60%;
float: left;
}
.sidebar2 {
float: left;
width: 20%;
background-color: #93A5C4;
padding: 10px 0;
}
Try this code. this may clarifies your problem .