This will be an easy question for most of you no doubt. I am trying to make a web page for my friend using this theme:
http://www.templatemo.com/live/templatemo_452_stone
I'm trying to move the header "STONE" more to the left, any ideas on how to do this?.. Also if possible I'd like the front-page image to be slightly higher up than it is.
Thanks in advance, I've got a headache from all the messing with it!
Looks like your .container class has a set width of 1177px. If you only want the header to move and not the links as well, then you'll have to add some negative margin.
.navbar-header {
margin-left: -50px;
}
Change your class container to container-fluid as below.
<div class="site-header">
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default navbar-static-top">
<div class="navbar-header">
The final output would be as below.
The difference between container and container-fluid as stated in the answer here is
.container-fluid continuously resizes as you change the width of your
window/browser by any amount, leaving no extra empty space on the
sides ever, unlike how .container does. (Hence the naming: "fluid" as
opposed to "digital", "discrete", "chunked", or "quantized").
You have to set this css rule to achive it:
div.row {
margin-left: -100px !important;
}
But as I don't know about your html/css structure it may have side effects...
You can also search in the html for the line:
<div class="row">
and put the style inlined:
<div class="row" style="margin-left: -100px">
Of course change -100px for the number of pixels you want. In the original css it's set to -15px;
Related
I am using bootstrap and I was wondering what would be a clean way to give a background to my container.
I am using the bootstrap class container, not container-fluid. Bootstrap doc clearly states that I shouldn't nest containers, so what is the alternative to achieve this goal ? If I set a background to my container the left and right margins are still white, I want to colour that space as well, but I also want my content to be aligned the way the container is aligned, not the way the container-fluid is aligned. Any suggestions ? My current solution is nesting a container inside container-fluid and remove the padding from the first one, but I want to make a better solution that doesn't go against the bootstrap documentation.
Thanks in advance !
EDIT
Here is for example what I had
<div class="container-fluid my-class">
<div class="container">
Some rows and columns here
</div>
</div>
and then I override bootstrap's padding in css
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.my-class {
background: red;
}
But, like I said, this is the bad way to do it.
Bootstrap doc clearly states that I shouldn't nest containers under other containers so just nest your container div under a new class div say, container-bg and add the background-image to that div like this:
HTML:
<div class="container-bg">
<div class="container">
<!-- your content -->
</div>
</div>
CSS:
.container-bg {
background: xxx;
}
If you want to set the background for the whole page, then set it on body.
If you want to set it for a section of the page, then wrap that section in an appropriate element (such as div or section), add a class, id or some other way to target it with a selector … just not one that uses a class provided by Bootstrap.
For Boostrap V4.0 and later
If you want to use boostrap colors as background, you can use these colors for the background, like below example
<div class="container bg-dark">
<!-- your content -->
</div>
I am stumped. I am using Bootstrap 3 static nav bar with a logo. I don't like how the responsive image works, so I would just like to calculate the size of the logo (image) to be 100% - 200px (width of hamburger toggle). I'm doing this so that the logo and hamburger can stay on the same "line" and don't increase the height of the navbar.
Here is my code snippet.
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsable-nav">
Menu <i class="fa fa-2x fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">
<img src="images/logo.png"/>
</a>
</div>
....
</div>
In my CSS, if I add
.navbar-brand img{
width:calc(100% - 200px);
height: auto;
}
and then using Chrome Developer Tools, I see extra margin on the right.
But there is no extra (right) margin defined in the css.
Now, if i manually change the width in chrome dev tools to the calculated width (in this example it is 310px) -- then it works correctly.
It seems like when I am using the calculated width, it adds a right margin, which causes the logo and hamburger to break to different lines. I have reviewed my CSS in Chrome Dev Tools and diff'd the two examples -- but can't find differences.
Any guidance as to WHY this is happening and how to fix it would be appreciated. Let me know if you need more code snippets.
Please try to use float option.
i.e:
Use "pull-left" class in "navbar-brand" and specify the width
.navbar-brand {
width: calc(100% - 20px);
}
.navbar-brand img{
width: 100%;
height: auto
}
This may help you.
You should try wrapping the entire nav element in "container-fluid" as the javascript for bootstrap, and the styles within bootstrap are likely stepping in between your nav elements, and adding "container-fluid" or (full size responsive container" to JUST your nav-header elements.
So begin by changing:
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
To:
<div class="container-fluid"> <!--Move this around entire nav element oor eliminate entirely-->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="navbar-header">
It is not an actual margin. When block elements does not extend to full width, dev tools shows the excess space as margin to show the layout.
In your case, please check if any value for display is inherited for this element.
Adding float will remove this highlight.
The problem was with the width of the navbar-brand element. I changed the width of that to
width:calc(100% - 200px);
and then set the width of the logo to
width: calc(100% - 10px);
and that gave me the desired effect and I don't have the navbar-brand logo with a line break.
use the below code to solve the above div width problem. if it is displaying different in different browser then write for Moz -moz-box-sizing:border-box,
Webkit -webkit-box-sizing:border-box;
box-sizing:border-box;
I have a fiddle here which shows my issue. You may need to make the 'result' quadrant wider to show the issue.
I have a couple of columns in my bootstrap layout but I can't seem to get my button to layout inside the parent div, it always seems to overlap it:
At first I thought it was due to the padding of the columns in bootstrap but I have removed that and the problem persists. I'm obviously missing something fundamental about how this is supposed to work, so any pointers to some help with css might not go amiss either.
apparently I have to link to some code to include a link to a fiddle so here is some:
My html is:
<div class="col-md-3 col-lg-3 nopadding">
<div class="definition-pallette">
<div class="row nopadding">
<div class="col nopadding"><button data-bind="click: showStepModal">+ Step</button></div>
</div>
</div>
</div>
and the additional css on top of the bootstrap default is:
.nopadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
Seems to be a few things going on here. The main issue is you are using a lot of divs with a class of 'col' inside your 'row' divs. To get them to start behaving you need to define what size the col is. This fixes most of your problems. So for example, where you have this
<div class="row">
<div class="col">Some content</div>
</div>
Change that to something like
<div class="row">
<div class="col-xs-12">Some content</div>
</div>
And it starts behaving.
I also got rid of your .nopadding class as you don't need that.
Here is an updated fiddle - http://jsfiddle.net/T4XY4/1/ - it fixes most of the things in the right panel, but I'll leave the rest to you. You may want to choose which classes you actually want inside your 'row' divs, I just chucked in xs-12 for simplicity.
Edit
The Bootstrap docs confirms that if you are nesting columns you need proper col-* classes - http://getbootstrap.com/css/#grid-nesting
Its caused by bootstraps margins in the row class adding margin:0; to your no padding class will fix this but might cause layout issues in other places or on mobile devices.
.row {
margin-right: -15px;
margin-left: -15px;
}
I am creating my first site using bootstrap, and as its a joomla site its version 2.3
I am having some problems getting going
here is the code so far:
<body>
<div class="container">
<div class="row logobar">
<div class="span12">
<div class="logoholder">
<img src="templates/<?php echo $this->template ?>/images/open-plan-design-logo.jpg" alt="Open Plan Design Logo " />
</div>
</div>
<!-- row --></div>....
and the css
body {
background:#231f21;
background-color:#DCDBDB;
color:#fff;
}
.container {
background-color:yellow;
}
.logoholder{
width:499px;
margin:0 auto;
}
.logobar {
margin-bottom:20px;
background-color:green;
}
At reduced screen widths everything looks fine - the image is centered, and reduces in size
However, at full width the image is not exactly centered, and there is an odd bit of green (from .logobar) sticking out at the left. If I take out the .row then the green disappears but of course nothing is resonsive
I guess I am doing something wrong...
you can see what I mean here www.opd.ee-web.co.uk
You need to change your row to row-fluid which will remove this negative margin.
<div class="row-fluid logobar">
Documentation [1].
More info [1].
The elements with .row have a negative margin applied to ensure and contained .span elements are correctly aligned.
You can remove this negative margin with some custom css, but that is likely to cause more problems.
The ideal solution is to simple move the logobar to the span level.
<div class="span12 logobar">
Add following code in your custom css file
body .row{
margin-left:0 !important;
}
Hi I am trying to fix my Jumbotron to be full width of the screen but somehow it need a 15px padding-left, padding-right. If I remove the padding the horizontal scrollbar appears with a 30px right margin. I am using the default Bootstrap ver 3.0.3 and default VS2013 layout. As per this link I removed the Jumbotron outside all .container my page looks sth like this
<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</body>
/////////////////////////////////////////////////
body {
padding-top: 50px;
padding-bottom: 20px;
/*background:url("../Images/ps_neutral.png") repeat;*/
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.just {
text-align: justify;
}
.specialjum {
background: url('http://fc00.deviantart.net/fs70/i/2013/339/7/1/princess_kenny_korosu_by_theshadowstone-d6wu2zo.png') center;
color:#fff;
background-size: cover;
}
Edit:
Firefox + Chrome + IE10 results ===|================|===
Any Ideas on how to fix the layout? I haven't touch the Bootstrap CSS which I updated using Nuget.
Just to share my experience after creating an MVC web application in Visual Studio 2013 I could not get the jumbotron to stretch the width of the screen no matter what I did. I ultimately found that it was being blocked by a default **container body-content tag on the Views/Shared/_Layout.cshtml page. After removing the tag it displayed correctly. Hope that helps anyone with a similar situation to mine.
The solution was simple. This is how I div it:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">.... Navigation stuff</div>
<div> <===================this Div wrapping jumbotron
<div class="jumbotron specialjum">
<div class="over container body-content">
....page headers and other stuff
</div>
</div>
<p class="just container body-content">
... body text
</p>
</div>
</body>
No changes to any part of the CSS. I don't know why it works, but it just works.
If you're just trying to remove the padding, then you'll want to put padding:0; in your .specialjum and make sure that the custom stylesheet is called after bootstrap. Otherwise add padding:0!important; if it needs to be called before. Also repeat this for margin-right: and add in width:100%; if it isn't stretching to the width of the page which I believe it should already.
See this jsFiddle
For anyone else that may end up here I have an alternative solution. I ran into this problem, but I just couldn't take my Jumbotron outside of it's container. What I did is just wrapped it in a <div class="row"></div>.
I'm still learning bootstrap so I don't know if this will cause any problems down the road, but for now it works pretty good.
In order to make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.
Another option in _Layout.cshtml (Where "Home" is the page you want to be full width):
#if (ViewData["Title"].Equals("Home"))
{
#RenderBody()
}
else
{
<div class="container container-main">
<main role="main">
#RenderBody()
</main>
</div>
}
Change width of .container to 100%:
container { width: 100% }