I'm having trouble with aligning a container-fluid within bootstrap. I've attached a screenshot of what I'm trying to achieve. The list items on the bottom left should align with the text at the top (which is contained in a container). The newsletter section on the bottom right (red background) should span the entire width from the center to the edge of the screen. The content within the newsletter section should also be aligned with the text at the top.
Here's what I currently have for the code at the bottom:
<div class="container-fluid">
<div class="col-md-12">
<div id="footer" class="col-md-6">
<ul>
<li>About Us</li>
<li>Consumers</li>
<li>Sites</li>
<li>Operators</li>
<li>Contact Us</li>
</ul>
</div>
<div id="newsletter" class="col-md-6">
<h4>Subscribe to our newsletter to receive the latest news about Poqeta </h4>
</div>
</div>
Thanks for any suggestions!
bootstrap-grid
You can wrap your footer in a div that you give a background that is half of the screen width, either using CSS gradients (if your only concern is modern browsers) or with absolutely positioning elements or images. See this answer for more information. Then within this "footer wrapper" you place a container, and within this container you define your columns. For each column you set the background color again. This will "overlay" the background color of the footer within the container.
<div class="footer">
<div class="container">
<div class="col-sm-8 left">
left section, list items
</div>
<div class="col-sm-4 newsletter">
newsletter section
</div>
</div>
</div>
.footer {
background: linear-gradient(90deg, #ffffff 50%, #ff0000 50%);
}
.left {
background: #ffffff;
}
.newsletter {
background: #ff0000;
}
See this fiddle for an example, you may want write some CSS for mobile (depending on what breakpoint you use for column wrapping, -sm, -md or -lg)
Change
<div class="container-fluid">
to
<div class="container">
To make background full page, try this:
<div class="container-fluid">
<div class="container">
...
</div>
</div>
You can make "padding: 0" on "container-fluid" or "container" to make it straight
Related
I´m trying to make the image below to fit the whole div, meaning that the background image should take the whole space and I shouldn't see the green color. Unfortunately I can´t find a way to do it.
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
border: 1px solid;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container no-padding" id="maincontent" tabindex="-1">
<div id="imagecontainer" class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/profile.png" alt="">
<div class="intro-text">
<h1 class="name">Start Bootstrap</h1>
<h1 class="name">Start Bootstrap</h1>
<h1 class="name">Start Bootstrap</h1>
<hr class="star-light">
<span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>
</div>
</div>
</div>
</div>
Many thanks!
Your using container, use container-fluid to make it full width. Here is a demo
The #maincontent div has a padding, a positive margin and a width set in pixels; and the #imagecontainer has a negative margin.
This is because that's the way Bootstrap deals to accomodate items in its grid.
You could considerate using a fluid Jumbotron instead to use the full width and take the necessary vertical space for your content.
This could be of help: https://v4-alpha.getbootstrap.com/components/jumbotron/
I have created this simple tribute page, with fixed background image.
I wanted to offset the container with the text content (I created a class just for it: .main-content) a bit down with a margin-top: 130px, so it's not glued to the very top of the page.
<body> <!-- applied background-image here -->
<div class="darken"> <!-- dark overlay on the background image -->
<div class="container-fluid">
<div class="container main-content"> <!-- .main-content - has margin-top: 130px; applied -->
<div class="row">
<div class="col-lg-offset-2 col-lg-10"> <!-- Bootstrap centering -->
<h1 class="display-1">St. Pope John Paul II</h1> <!-- just another text below... -->
<h2 class="display-4">Pope of the family</h2>
</div>
</div>
<div class="row">
<div class="col-....... <!-- rest of the text -->
However - a strange thing happened - the
.main-content {
margin-top: 130px;
}
margin seems to affect the body (according to Chrome DevTools...) thus eventually affecting (applying the margin-top to) the div with .darken class!
I want to achieve two things:
Having my text offset from the top of the page
Having .darken class applied to the full viewport
How can I achieve this?
CodePen link
Please try this:
Instead of margin use padding.
.main-content {
padding-top: 130px;
}
I am building a WordPress site and using Bootstrap. I am trying to add padding to my sections but it is not working. In the inspector, it has the yellow triangle exclamation beside it and I cannot figure out why. Here is my CSS:
#stats {
padding: 36px auto !important;
}
And my HTML:
<section id="stats">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h4>This is an infographic</h4>
</div>
<div class="col-sm-4">
<p>This is some supporting text</p>
</div>
</div>
</div>
</section>
Is there something in Bootstrap that is keeping this from happening? Here is a screen shot of the inspector:
auto is not a valid value for the padding property. If you want to use auto, use margin, or stick to px values for padding.
I have a div I'm trying to give specific properties to. My page has a header and a footer, and I want the body to consist of a panel with 15px padding all around, but the bottom padding always ends up variable. If the window is too tall, I end up with bottom padding that's 3–4x larger than the top and side padding, and if the window is too small, the footer overlaps the bottom of the panel. My html essentially looks like this:
<div class="container-fluid">
<div class="row">
<div id="content" class="col-sm-12">
<div class="panel panel-default">
Title
</div>
<div class="panel-body">
Content
</div>
</div>
</div>
</div>
I've tried giving #content the following style:
position: fixed;
top: 15px;
bottom: 15px
hoping that I could get a constant border all around, but when I have both top and bottom properties, top just overrides bottom and I still have that variable padding on the bottom. Any ideas?
For further clarification, see jsfiddle here. Notice that when you drag the divider above Result, the lower border moves up or down at about half the speed you're moving your cursor—I want to make it so the bottom of the panel stays a constant distance from the bottom of the window.
Thanks!
It's easiest to just introduce a wrapper to avoid stomping on Bootstrap styles.
<div class="container-fluid">
<div class="my-wrapper">
<div class="row">
<div id="content" class="col-sm-12">
<div class="panel panel-default">
Title
</div>
<div class="panel-body">
Content
</div>
</div>
</div>
</div>
</div>
And:
.my-wrapper{padding:15px;}
JSFiddle
Is there a way in Bootstrap 3 to right align a div?
I am aware of the offsetting possibilitys but I want to align a formatted div to the right of its container while it should be centered in a fullwidth mobile view. The class 'pull-right' is not working anymore. Did they forgot to replace it or am I missing something obvious?
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<!-- The next div has a background color and its own paddings and should be aligned right-->
<!-- It is now in the right column but aligned left in that column -->
<div class="yellow_background">right content</div>
</div>
</div>
</div>
Shure I know how to do this in CSS, but can it be done in pure bootstrap 3?
The class pull-right is still there in Bootstrap 3
See the 'helper classes' here
pull-right is defined by
.pull-right {
float: right !important;
}
without more info on styles and content, it's difficult to say.
It definitely pulls right in this JSBIN
when the page is wider than 990px - which is when the col-md styling kicks in,
Bootstrap 3 being mobile first and all.
Bootstrap 4
Note that for Bootstrap 4 .pull-right has been replaced with .float-right
https://www.geeksforgeeks.org/pull-left-and-pull-right-classes-in-bootstrap-4/#:~:text=pull%2Dright%20classes%20have%20been,based%20on%20the%20Bootstrap%20Grid.
Do you mean something like this:
HTML
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<div class="yellow-background">
text
<div class="pull-right">right content</div>
</div>
</div>
</div>
</div>
CSS
.yellow-background {
background: blue;
}
.pull-right {
background: yellow;
}
A full example can be found on Codepen.
i think you try to align the content to the right within the div, the div with offset already push itself to the right, here some code and LIVE sample:
FYI: .pull-right only push the div to the right, but not the content inside the div.
HTML:
<div class="row">
<div class="container">
<div class="col-md-4 someclass">
left content
</div>
<div class="col-md-4 col-md-offset-4 someclass">
<div class="yellow_background totheright">right content</div>
</div>
</div>
</div>
CSS:
.someclass{ /*this class for testing purpose only*/
border:1px solid blue;
line-height:2em;
}
.totheright{ /*this will align the text to the right*/
text-align:right;
}
.yellow_background{
background-color:yellow;
}
Another modification:
...
<div class="yellow_background totheright">
<span>right content</span>
<br/>image also align-right<br/>
<img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...
hope it will clear your problem
Bootstrap 4+ has made changes to the utility classes for this. From the documentation:
Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
So use the .float-right (or a size equivalent such as .float-lg-right) instead of .pull-right for your right alignment if you're using a newer Bootstrap version.
Add offset8 to your class, for example:
<div class="offset8">aligns to the right</div>