I am using bootstrap grid system.
I have 3 grids which aligned center:
<div id="jumbotron">
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<p>
Logo
</p>
</div>
<div class="col-md-4 col-centered">
<h3>
Some text
<h3>
</div>
<div class="col-md-4 col-centered">
<ul class="list">
<li>
<img src="img_url"/>
<a class="phones" href="+1-380-555-5555">+13805555555</a>
</li>
<li>
<img src="img_url"/>
<a class="phones" href="+1-380-555-5555">+13805555555</a>
</li>
<li>
<img src="img_url"/>
<a class="phones" href="+1-380-555-5555">+13805555555</a>
</li>
</ul>
</div>
</div>
</div>
</div>
and CSS looks like:
.row-centered {
text-align: center;
}
.list {
text-decoration: none;
color: #f1f0e9;
font-size: 20px;
font-family: 'Trirong', serif;
list-style-type: none;
text-align-last: right;
}
In third grid I have which I want to be aligned right.
text-align: right helps, but when I switch to mobile mode bootstrap makes grids in a column and third grid become right aligned(two others centered).
So I need that third grid will come right aligned but inside parent grid which has center align. Is it possible?
Try add a pull-right class to those you want right
Remove text-align-last: right; property because it's not affect to the a tag inside li. Use .list:last-child a will select the last li tag and affect to its a tag.
.row-centered {
text-align: center;
}
.list {
text-decoration: none;
color: #f1f0e9;
font-size: 20px;
font-family: 'Trirong', serif;
list-style-type: none;
/*text-align-last: right;*/
}
.list li:last-child a{
text-align: right;
}
Answer:
I have separated columns on two <ul class = "list"> objects and add
display: inline-block;
*display: inline;
properties to list class.
Related
I created a little test website with UIKit. Now that I messed around with that I wanted to try and create the design without using a pre-made framework. I am having issues with my navbar though.
This is the Original navbar that was created on the UIKit, see how the text is aligned vertically with the middle of the logo.
This is the second image, which is the Navbar i am trying to create, as you can see the text is on the same row as the image, but it is aligned with the top of the image (logo)
I am Trying to make the second image like the first image, the text aligned with the centre of the logo. I have tried "vertical-align: middle;" in my css but it doesn't seem to work... Any ideas?
Here's my code:
html {
font-family: monospace;
font-size: 12pt;
}
body {
margin: 0;
}
header {
background-color: honeydew;
}
nav .ul {
list-style-type: none;
display: table;
margin: 0;
padding: 0;
overflow: hidden;
float: left;
vertical-align: middle;
}
li {
display: table-cell;
vertical-align: middle;
}
<header>
<div class="row">
<nav>
<ul class="column small-hidden large-12">
<li class="column small-hidden large-3"> </li>
<li class="column small-hidden large-1">Yep</li>
<li class="column small-hidden large-1">Yep</li>
<li style="float: center;" class="column small-hidden large-1 logo"><img alt="Website Logo" src="img/image.png"></li>
<li class="column small-hidden large-1">Yep</li>
<li class="column small-hidden large-1">Yep</li>
<li class="column small-hidden large-3"> </li>
</ul>
</nav>
</div>
</header>
Thanks in advance!
You can try this:
nav li.img{ vertical-align: middle;}
Seems super simple but I am unable to horizontally center text in a parent element while using display:inline-block on the text. I need it to be display:inline-block because I want the border around the text I create to be the size of the text and NOT the parent.
Is there another way to make the border I give the text the width of the text and not the parent?
a.studio-nav {
font-family: 'brandon-reg';
font-weight: 900;
color: white;
font-size: 20px;
display: inline-block;
text-align: center;
margin:0 auto;
padding:7px 4px;
}
a.studio-nav:hover {
border:2px solid white;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
text-decoration: none;
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row clearfix">
<div class="col-xs-4 col-md-4">
<a href="/" class="studio-nav">
text
</a>
</div>
<div class="col-xs-4 col-md-4">
<a href="/" class="studio-nav">
I want
</a>
</div>
<div class="col-xs-4 col-md-4">
<a href="/" class="studio-nav">
centered
</a>
</div>
</div>
Could it be as simple as this?
.row {
text-align: center;
}
Example fiddle: https://jsfiddle.net/rczfnf6d/
Bootstrap has also a quick way of achieving this with an alignment class called ".text-center"
<div class="col-xs-4 col-md-4 text-center"> <!-- class added-->
<a href="/" class="studio-nav">
text
</a>
</div>
Try
display: inline-table;
instead of
display: inline-block;
I'm trying to understand 3 problems.
1) When minimizing to Col-XS, the picture is slightly off from centre - How do I fix this?
2) When the logo sits inside the Column, it forces the entire menu to widen due to the logo taking up space. This causes a huge amount of background colour (from the menu) to appear when not needed. Can anyone recommend a suitable fix for this (whether this be a design recommendation or a coding fix)?
3) If the above cannot be fixed, how do I make the 4x Menu items move from the top of the bar to the bottom? Would this be a job for Display: Relative or something like that? Or do the display tags not work within bootstrap (v3.3.5)?
Thanks in advance!
Snippet
.logo {
width: 150px;
height: 150px;
}
.header {
background: #5A1FD3;
border: 2px solid #46248B;
}
.header li {
list-style-type: none;
background: #5A1FD3;
font-weight: bold;
font-size: 20px;
text-align: center;
}
.header li:hover {
transition: 1.5s;
background: #46248B;
}
.header a:link {
color: azure;
}
.header a:visited {
color: azure;
}
.header a:active {
color: azure;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- NAV MENU -->
<div class="container-fluid">
<div class="row">
<div class="header col-sm-12 col-xs-12">
<div class="row text-center col-sm-3 col-xs-0">
<img class="logo center-block" src="Pictures\Jamie Bohanna.png" alt="Logo">
</div>
<ul>
<li class="col-sm-2 col-xs-12">Home
</li>
<li class="col-sm-2 col-xs-12">Portfolio
</li>
<li class="col-sm-2 col-xs-12">Rates
</li>
<li class="col-sm-2 col-xs-12">Contact
</li>
</ul>
</div>
</div>
</div>
It is, for logical reasons, practical to use two rows. One for the logo and one for the list. And together they are the header:
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-..."
<img class="logo" />
</div>
</div>
<div class="row">
<div class="col-..."
<ul class="list-unstyled"><!-- .list-unstyled is a bootstrap class -->
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div><!-- End of .header -->
</div>
.container-fluid has a padding-left: 15px and a padding-right: 15px, so that one can make
.header {
margin: 0 -15px;
...
}
so that there will be no gap on the right and left side.
Example
This is my first post, because I'm stuck on the first part of making my first website.
I'm trying to make a navigation bar with five parts:
(Vertical list of 3 items) (Label) (Logo) (Label) (Vertical list of 3 items)
For example,
(Apples, Oranges, Pears) (Fruits) (Logo) (Vegetables) (Broccoli, Celery, Lettuce)
With my code, the two vertical lists aren't aligned with each other, and I can't get any of them to center vertically in the bar.
This is my code:
HTML
<body>
<div class='nav'>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-3'>
<ul class='port-list' class='navbar-left'>
<li>Art</li>
<li>Design</li>
<li>Writing</li>
</ul>
</div>
<div class='col-md-3'>
<p class='port'>Portfolio</p>
</div>
<img>
<div class='col-md-3'>
<p class='about'>About</p>
</div>
<div class='col-md-3'>
<ul class='about-list' class='navbar-right'>
<li>Biography</li>
<li>Résumé</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS
* {
list-style: none;
list-style-type: none;
}
body {
height: 100%; /* Prevents rubber-band scrolling */
overflow: hidden; /* Prevents rubber-band scrolling */
}
.nav {
color: #fff;
font-family: 'Donegal One', serif;
background-color: #004d40;
padding-top: 12px;
padding-bottom: 8px;
display: block;
}
.port-list {
text-align: right;
}
.port {
text-align: left;
}
.about {
text-align: right;
}
.about-list {
text-align: left;
}
This here newbie would appreciate any help. Thanks.
Here is the updated code
HTML
<div class='row newRow'>
Added newRow to row
CSS
.newRow {
width: 100%;
display: table;
}
.newRow .col-md-3 {
display: table-cell;
vertical-align: middle;
float: none
}
You can define line-height for both div as follow:
<div class='col-md-3' style="line-height:58px;">
<p class='port'>Portfolio</p>
</div>
....
<div class='col-md-3' style="line-height:58px;">
<p class='about'>About</p>
</div>
I have been trying to figure this little bugger out for a little while, and now I seek some expertise. What am I trying to do? I want to create a 100% width menubar, but keep the logo, and the content centered so it can fit in with the rest of the content. The container is on 1000px. Right now I have placed my menu outside of the container tag, and used "width: 100%" to get it to cover the screen. However with that the content moves to the left. I don't really know how to fix this, I have been working on it for a while.
Here is my HTML code:
<body>
<!-- navigation / header -->
<div class="grid_12" id="menu">
<div class="grid_3" id="logo">
<img src="img/logo.png" alt="logo" />
</div>
<div class="grid_9 omega">
<ul class="nav">
<li>
<label>
Features
<br />Check our features
</label>
</li>
<li>
<label>
Pricing
<br />Starts at $X/month
</label>
</li>
<li>
<label>
30-day free trial
<br />Start using us right away
</label>
</li>
<li class="sign-btn">
Log in
</li>
</ul>
</div>
</div>
<div class="container clearfix">
and here is my css file:
#menu {
width:100%;
margin: 0 0 0 0;
padding: 0;
background: #1d3853;
color: white;
font-size: 13px;
}
.nav li {
padding-top: 15px;
list-style:none;
float: left;
text-align: center;
margin-right: 20px;
}
.nav li a {
color: #a7c5e3;
font-family: helvetica;
font-weight: bold;
letter-spacing: 1px;
}
.sign-btn a {
color: #FFF;
display: block;
background: #105296;
padding: 10px 15px;
text-align: center;
border-radius: 5px;
border: 1px solid white;
}
So I ask again, dear StackOverflow... how do I get my links in the center with the rest of my content. Like this picture: http://www.cssnewbie.com/wp-content/uploads/2009/12/centered-navbar-sketch.png
write your navigation code inside another div with class=container.
That is
<body>
<div class="container">
<!-- your navigation code here-->
</div>
</body>
To center something with a set width, add the style margin:auto. To be more precise, you only need margin-left:auto and margin-right:auto to give equal padding to an element inside a container.