Using Bootstrap 4 I'm trying to achieve an overlay effect with .png image which is also masking a part of bottom area of first section.
The height of .png image is 130px and it also should remain unscaled on mobile devices.
I've tried to use ::after pseudoelements with content as background image on first section, but this gives me a unwanted bottom margin.
See my example here: https://codepen.io/michalwyrwa/pen/EGbxXb
Is there a better way to do it?
CSS:
body {
color: #ecf0f1;
}
.welcome .col {
background-color: #3498db;
height: 50vh;
}
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
margin: 0;
padding: 0;
}
.features .col {
background-color: #6ab04c;
height: 50vh;
}
HTML:
<section class="welcome">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Welcome text</p>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Features</p>
</div>
</div>
</div>
</section>
I didn't find the root cause of your problem but I have the solution for you.
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
padding: 0;
margin-bottom: -6px;
}
Related
Using Bootstrap 5, how I can extend a row to either be outside a container or appear to be outside the container and stretch to the viewport edge without a horizontal scrollbar.
Reviewing the questions related to this, I see the use of pseudo-elements. When I try to use a pseudo-element, a horizontal scrollbar appears, which is not the behavior I want. As stated in an answer below, I could use an overflow hidden on the body, but that isn't preferred since I feel that could cause styling issues elsewhere. Note that the example pen below is a very watered-down example.
CodePen showing an example of what I'm trying.
.full-width {
position: absolute;
}
.full-width:before {
left: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.full-width::after {
right: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bg-dark vh-100">
<div class="row bg-light p-5">
<p class="text-dark">Hello World</p>
</div>
<div class="row full-width bg-info p-2">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>
Edit:
I can accomplish what I'm looking for by separating the page at certain points with three containers. See this codepen for an example. This may be the approach I take, in my given situation. There are styling issues I'll need to take into account in the middle container, but could be accomplished fairly easily. If there's thoughts on a better way, please let me know.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row bg-light p-5">
<div class="col">
<p class="text-dark">Hello World</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row bg-info p-2">
<div class="col">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>
</div>
<div class="container">
<div class="row bg-light p-5">
<div class="col">
<p>More content here</p>
</div>
</div>
</div>
First of all you need overflow:hidden on the body. Secondly, content doesn't go directly in the row. Instead content should be placed inside a column (col) inside the row. Then make the col full-width...
https://codeply.com/p/krYOqrcJlR
<div class="container bg-dark vh-100">
<div class="row bg-light">
<div class="col">
<p class="text-dark">Hello World</p>
</div>
</div>
<div class="row bg-info">
<div class="col full-width">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>
</div>
body {
overflow:hidden;
}
.full-width {
position: relative;
}
.full-width:before {
left: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.full-width::after {
right: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
The idea is that certaint section of the page have two color by column:
[ Column left color red ] [ Column right color green ]
So basically the html right now looks like this.
<section id="foo">
<div class="wrapper-content">
<div class="col-sm-5 bg-red">Some content</div>
<div class="col-sm-7 bg-green">Some Other Content</div>
</div>
</section>
That gives me how I need it to look, full width 2 columns with different colours, the problem is the container.
First image is what I need
Second image is what I'm getting
Following code is not working at all....
<section id="foo">
<div class="wrapper-content">
<div class="col-sm-5 bg-red same-height"></div>
<div class="col-sm-7 bg-green same-height"></div>
<div class="container absolute">
<div class="col-sm-5">Some content</div>
<div class="col-sm-7">Some Other Content</div>
</div>
</div>
Colour on the left hast to go all the way left, the colour on the right all the way right, bu the content has to stay center and between the two columns.
Any ideas?
You have to add a container class to your content section too.
Or put your content section into the header wrapper div.
Example: If your header div is wrapped with a class <div class="container">...</div>, also wrap the content div with this class too.
Sample 1: if you want different sections for both header and content
<div class="container">
<div>Header</div>
</div>
<div class="container">
<div>Your content section</div>
</div>
Sample 2: if you dont need header and content sections to be separated
<div class="container">
<div>Header</div>
<div>Your content section</div>
</div>
This may work. You have to put divs of the same background color behind your foreground divs, absolutely positioned.
The container doesn't restrict the size at small widths, so you may have to expand the snippet to full page to see the results (the black borders are there to show the boundaries of your content areas)
.header {
background-color: beige;
margin-bottom: 20px;
}
.main-content {
position: relative;
}
.left-bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
background-color: #dddddd;
}
.right-bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50%;
background-color: #aaaaaa;
}
.left-fg {
background-color: #dddddd;
border: 1px solid black;
padding: 30px 0;
}
.right-fg {
background-color: #aaaaaa;
border: 1px solid black;
padding: 30px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header">Header</div>
<div class="main-content">
<div class="left-bg"></div>
<div class="right-bg"></div>
<div class="container">
<div class="row">
<div class="left-fg col-xs-5">Hello</div>
<div class="right-fg col-xs-7">Goodbye</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Im using Bootstrap in my application. I am trying to make it so my whole left side is #fff, while rest is #f9f9f9.
This is what I have so far.
HTML:
<div class="container">
<section class="content">
<div class="col-xs-8">
// Left side
</div>
<div class="col-xs-4">
// Right side side-bar
</div>
</section>
</div>
CSS:
. container {
width: 1200px !important;
}
PS: I don't want/need responsive design.
Image below is a example for what I want to achieve.
Here is a link that hast the same design.
Please try the following code:
HTML
<div class="container">
<section class="content">
<div class="col-xs-8 left-side">
// Left side
</div>
<div class="col-xs-4 side-bar">
// Right side side-bar
</div>
</section>
</div>
CSS
.container{
margin: 0;
padding: 0;
width: 100%
}
.content{
height: 100%;
width: 100%;
}
.left-side{
background-color: #fff;
min-height: 100%;
}
.side-bar{
background-color: #f9f9f9;
min-height: 100%;
}
.no-margin{
margin: 0;
padding: 0
}
This would be a way to achieve what you want to do.
.leftside {
background: #fff;
}
.rightside {
background: #f9f9f9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-8 leftside">
// Left side
</div>
<div class="col-xs-4 rightside">
// Right side side-bar
</div>
</div>
</div>
I am having a problem getting the bootstrap grid to display properly. My code is as follows
<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
All I see is:
grid
Anyone know what's happening here? I have all the bootstrap.css, bootstrap-theme.css, and bootstrap.js properly included. Other things such as buttons are bring properly formatted by bootstrap.
As far as I see your 2 div's are formatted as they should? (Using Boostraps md-6).
You don't need the .col-md-6 value in your div though:
<div class="container">
<div class="row">
<div class="col-md-6">Your text here</div>
<div class="col-md-6">Your text here</div>
</div>
</div>
For more information check out the official Bootstrap Documentation page on Grid Templates
For the grid view used in the documentation (grid.css) add the following CSS:
h4 {
margin-top: 25px;
}
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
hr {
margin-top: 40px;
margin-bottom: 40px;
}
Modify as below
<div class="container show-grid">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
add the following css to your style sheet
.show-grid div{
border:1px solid ;
}
Bootstrap makes an "invisible" grid if you want to see it that way, if you want to make the grid visible you can do it with css either adding a background color or border, my favorite is background color:
css:
.y0 { background-color: #CCC; }
.y1 { background-color: #9FF; }
.y2 { background-color: #F9F; }
.y3 { background-color: #F99; }
.y4 { background-color: #FF6; }
.y5 { background-color: #3C3; }
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 y0">Your text here</div>
<div class="col-md-6 y1">Your text here</div>
</div>
</div>
I've searched quite a bit looking for an explanation as to why this behavior is occurring.
Essentially I've setup 2 columns, each with a nav bar and content area.
CSS
#mainContainer {
background-color: lightblue;
width: 100%;
height: 300px;
}
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
}
#leftBar, #rightBar {
background-color: purple;
height: 10%;
}
#leftMain, #rightMain {
background-color: grey;
height: 90%;
}
HTML
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar"></div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
Whenever I add an element to the nav bar in only one column it shifts the entire column down.
http://jsfiddle.net/qn6rs0q2/3/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
But if I add another element to the other column they line up again.
http://jsfiddle.net/qn6rs0q2/5/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar">
<button>Test 2</button>
</div>
<div id="rightMain"></div>
</div>
</div>
To clarify, I'm not looking for a solution to fix this behavior. Rather I'm hoping someone can explain the underlying reason behind why it's behaving as it is. Thanks in advance.
It happens because the default vertical alignment of inline elements is the baseline. If you set the vertical alignment to top (or middle) for both sides, they line up as you want:
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
vertical-align:top;
}
jsFiddle example