I'm having trouble style/adding a header above my navbar. I was able to add the header but the alignment is completely off.
I'm trying to have it align with the first navbar button. May I ask how do I create/edit my header such that it'll align with the navbar.
<div class="container" style="background-color: #00a3a3;">
<div class="row">
<div class="col-md-12">
<h2 class="pull-left" style="color: white">THE COMPANY NAME</h2>
</div>
</div>
</div>
http://codepen.io/anon/pen/RrwvNa
I was able to get it to align using this code
<nav class="navbar" style="background-color: #00a3a3;">
<div class="container-fluid col-sm-1">
</div>
<div class="col-sm-7">
<div>
<h2 class="pull-left" style="color: white">THE COMPANY NAME</h2>
</div>
</div>
</nav>
but there seems to be a space between the header and the nav bar.
Here is the solution. Take a look in Codepen
Change your container to container-fluid and use margin-left:8.5% in your h1 header.
<div class="container-fluid" style="background-color: #00a3a3;">
<div class="row">
<div class="col-md-12">
<h2 class="pull-left" style="margin-left:8.5%;color: white">THE COMPANY NAME</h2>
</div>
</div>
</div>
Related
I have a classic bootstrap template, like this:
<div class="container">
<div class="row">
<div class="col-12">
...header...
<div class="carouselContainer">
...carousel...
</div>
...content...
</div>
</div>
</div>
and now my website looks like this (H - header, S - slider, C - content, F - footer, with margin: auto):
I want to (visually, using CSS) pull out slider from div.row and div.col-12, like this.
I have tried using position:absolute, but after that, part of content is hidden under slider, plus I want to keep everything safe on different screen resolutions (not using pixels, and maybe on smallest screens carousel will be hidden).
does anyone have an idea how to do it? (I'm sorry if I complicated.)
Try simply stacking different .containers, like this...
<div class="container">
<div class="row">
<div class="col-12">
...header...
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="carouselContainer">
...carousel...
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
...content...
</div>
</div>
</div>
You shouldn't nest .container's but you can stack them! In this case container-fluid will go full width. the others won't.
Why not change the HTML structure and use a container-fluid to wrap your slider.
It would be better ( imho ) to use HTML tags for elements like <header> <main> <footer>
So a structure would be
<header>
<div class="container">
<nav>
Nav here
</nav>
</div>
</header>
<main>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="slider">
Slider Here
</div>
</div>
</div>
</div>
<div class="container content">
<div class="row">
<div class="col-12">
Content Here
</div>
</div>
</div>
</main>
<footer>
Footer Here
</footer>
So I keep trying to align images and text to the center and they keep appearing on the left side of the screen can someone help.
<div class="container">
<div class="col-md-6 col-sm-6 hidden-xs">
<div class="row">
<p class="borderexample3">
<font color="white" class=> Recent News</font>
</p>
</div>
<h1><font color="white"><font face="roboto-bold,roboto,sans-serif"<h1 align="right">Keep Updated!</font></h1>
<div style="text-align: center"><img src="assets/img/fwah.jpg" /></div>
</div>
</div>
This is what shows up.
http://prntscr.com/kgc5c2
I would like it where my red guidelines are on this image.
http://prntscr.com/kgc5tn
Try pushing your columns using col-sm-push-#.
<div class="col-sm-push-3 col-sm-6 hidden-xs">
try this
<div class="container" align="center">
I guess you have to add the following lines in wherever you want to make it center:
style="text-align:center;"
<div class="container">
<div class="col-md-6 col-sm-6 hidden-xs">
<div class="row">
<p class="borderexample3" style="text-align:center;">
<font color="black" class=""> Recent News</font>
</p>
</div>
<h1 style="text-align:center;"><font color="black"><font face="roboto-bold,roboto,sans-serif"<h1 align="right">Keep Updated!</font></h1>
<div style="text-align: center"><img src="assets/img/fwah.jpg" /></div>
</div>
</div>
I'm trying to have image next to the headline in one row, both centered in Foundation 5. Example is here.
HTML
<div class="row">
<div class="panel small-12 column">
<div class="row">
<div class="small-5 column text-right">
<img src="http://placehold.it/60x60&text=logo" />
</div>
<div class="small-7 column text-left">
<h1>APP NAME</h1>
</div>
</div>
</div>
</div>
In this example solution isn't ideal because it is not centered exactly especialy on the large screens.
I've also tried something like this:
HTML
<div class="row">
<div class="panel small-12 column text-center">
<img src="http://placehold.it/60x60&text=logo" />
<h1>APP NAME</h1>
</div>
</div>
But it doesn't work: image isn't centered. What is the best way how to do this in Foundation 5?
Since an img is an inline element and h1 is a block element, you should put the image inside the heading. See the JSFiddle demo.
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="panel small-12 column text-center">
<h1><img src="http://placehold.it/60x60&text=logo" alt="" /> APP NAME</h1>
</div>
</div>
Additionally, alt is a required attribute, so I've added one with a blank value.
I've been spinning my wheels on trying to get a div panel element to appear on the top right of the page, on the same line as the h1 element:
<div class="container">
<div class="page-header">
<h1>
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary">
...content...
</div>
</div>
...
</div>
I'm a bit of an amateur with CSS/HTML, but I've tried the pull-left/right classes along with every permutation of display/position, etc. The outcome is always garbled. Any suggestions?
you have to add pull-left to the h1 too.. to have both of them floated..
also add a .cleafix class to the page-header div
<div class="container">
<div class="page-header clearfix">
<h1 class="pull-left">
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary pull-right">
...content...
</div>
</div>
...
</div>
I wouldn't use the .page-header for this, it doesn't clear and it's meant for text. Use the grid system so that you can set a size for your panel as they are not a set width and requires a wrapper to have a width. It will layout very cleanly this way.
Just a note: when you use the .pull-right and .pull-left classes on anything in Bootstrap these cover all viewport sizes and the results can look pretty yucky as the viewport gets smaller.
DEMO: http://jsbin.com/sadup/1
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="http://placehold.it/200x75/444444/FFFFFF&text=logo" class="img-responsive" alt="Logo">
</div>
<!--/.col-sm-8 -->
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<!--/.col-sm-4 -->
</div>
<!--/.row -->
</div>
<!--/.container -->
I'm using the Foundation CSS framework create and off-canvas-menu, however, when I click the off-canvas-toggle anchor, the menu slides in and covers the entire screen. I am unable to get out of the menu. The example on the foundation page (http://foundation.zurb.com/docs/components/offcanvas.html) doesn't have this problem. Am I doing something wrong/missing something?
<div class="fill-h off-canvas-wrap move-right">
<div class='fill-h inner-wrap'>
<aside class="left-off-canvas-menu">
Left off canvas menu
</aside>
<div class="row fill-h">
<div class="xlarge-2 large-3 medium-1 columns show-for-medium-up fill-h" id="a">
<div class='row' id='navTabs'>
<div class='small-4 columns active'><img src='/img/icon.png' /><br/>Current</div>
<div class='small-4 columns'><img src='/img/icon.png' /><br/>New</div>
<div class='small-4 columns'><img src='/img/icon.png' /><br/>Phone</div>
</div>
<div id="navListing" ui-view="vw-listing">
</div>
<div id='nav_footer' class='small-12'>
<div id="adminMenuBtn">
Admin
</div>
footer
</div>
</div>
<div class="xlarge-10 large-9 medium-11 columns" ui-view="vw-details2">
<div style='background-color:#333;float:left;'>
<a class="left-off-canvas-toggle menu-icon"><span></span></a>
</div>
<div ng-include="views/interactions/details-blank.html"></div>
</div>
</div>
<a class="exit-off-canvas"></a>
</div>
</div>