I am building the front end of my website in bootstrap 4. I'd like one of my pages to be split into four background images each of which fills a column so that the columns stack responsively on mobile. As of now, I have the design below where I use the background-image attribute to fill each column. The images do not fill the whole column though.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="img img-profile-1">
</div>
</div>
<div class="col-md-3">
<div class="img img-profile-2" >
</div>
</div>
<div class="col-md-3">
<div class="img img-profile-3" >
</div>
</div>
<div class="col-md-3 text-center">
<div class="img img-profile-4">
</div>
</div>
</div>
</div>
I added the css below to the div within each column and got the full image to show but there is a strange scrolling issue and white space when I make the viewport smaller.
.img-profile-1 {
background-image: url('../img/image.jpg') !important;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
margin-left: -15px;
margin-right: -15px;
}
Any ideas how to get handle this responsive vs background image dilemma?
Thanks!
You don't have to add another <div> inside the .col-md-3 in order to give it a background, instead you can just give that same <div> the class of .img-profile-1 and so on.
Bootstrap 4 also adds a cool class to where it removes all white spaces between each .col, it is called .no-gutters. You can view that on the snip below.
.img-profile-1,
.img-profile-3 {
background-image: url('http://placehold.it/500/aaaaaa/000000');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 300px;
}
.img-profile-2,
.img-profile-4 {
background-image: url('http://placehold.it/500/000000/ffffff');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-md-3 img img-profile-1">
</div>
<div class="col-md-3 img img-profile-2">
</div>
<div class="col-md-3 img img-profile-3">
</div>
<div class="col-md-3 text-center img img-profile-4">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>
Instead of setting the width and height in your css for the div, try adding class img-fluid to the image tag.
Here is the fix
If you add col-md-3 or any other column in bootstap it take right padding and left padding of 15px so that inner content will no cover full width. To cover full width we need to add another div with class row below the column so that inner content will be made to cover full width
Fixed code is given below
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="img img-profile-1">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="img img-profile-2" >
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="img img-profile-3" >
</div>
</div>
</div>
<div class="col-md-3 text-center">
<div class="row">
<div class="img img-profile-4">
</div>
</div>
</div>
</div>
</div>
Related
I am doing a simple page with a bootstrap grid and I am having some problems with placing the middle row occupying the full height in the middle.
These are the 3 rows: page
I want to place the row with the logo in the middle, but I am having problems with it. I placed height: 100%;, height: auto;. I even placed the container height to 100% and auto and nothing works!
I think there is a concept about bootstrap heigh that I am missing, because its the heigh that I have problems
html:
<div class="container-fluid">
<div class="row">
<div class="col-md-1 col-2">
<img id="menuIcon" (click)="toggleRightSidenav()" onmouseover="this.src='../../../assets/Images/generic/menuIcon_hover.png'" src="/assets/Images/generic/menuIcon.png" onmouseout="this.src='/assets/Images/generic/menuIcon.png'">
</div>
<div class="col-md-10 col-8">
</div>
<div class="col-md-1 col-2">
<img id="helpIcon" routerLink="/guide" onmouseover="this.src='../../../assets/Images/home/helpIconHover.png'" src="/assets/Images/home/helpIcon.png" onmouseout="this.src='/assets/Images/home/helpIcon.png'">
</div>
</div>
<div class="row row align-items-center mh-100" >
<div class= "col-md-12">
<img id="logo" src="/assets/Images/home/Logo.png">
</div>
</div>
<div class="row align-items-center justify-content-around fixed-bottom">
<div class="col-md-2 col-sm-2">
<img id="addButton" routerLink="/addPlayer" onmouseover="this.src='../../../assets/Images/generic/addIcon_hover.png'" src="../../../assets/Images/generic/addIcon.png" onmouseout="this.src='/assets/Images/generic/addIcon.png'" />
</div>
<div class="col-md-2 col-sm-2">
<p>Players Waiting: {{playerWaiting}} </p>
</div>
<div class="col-md-2 col-sm-2">
<p>Listed Players: {{playersListed}}</p>
</div>
<div class="col-md-2 col-sm-2">
<img id="searchButton" routerLink="/search" onmouseover="this.src='../../../assets/Images/generic/searchIcon_hover.png'" src="../../../assets/Images/generic/searchIcon.png" onmouseout="this.src='/assets/Images/generic/searchIcon.png'" />
</div>
</div>
</div>
css:
div{
border: yellow 1px solid;
}
#menuIcon{
width: 100%;
height: auto;
}
#helpIcon{
width: 100%;
height: auto;
}
#addButton{
width: 100%;
height: auto;
max-width: 127px;
}
#searchButton{
width: 100%;
height: auto;
max-width: 127px;
}
https://www.codeply.com/p/Xd0xi5hFNc
Couple of things.
To be able to fill several rows, you'd need a height for the container div.
Current HTML
<div class="container-fluid">
Update as
<div class="container-fluid d-flex vh-100 flex-column">
Now you can easily make your middle div fill the remaining gap by adding a fill-height class.
Current HTML
<div class="row row align-items-center mh-100" >
Update as
<div class="row row align-items-center fill-height">
Add this to your css
.fill-height {
flex: 1;
}
.fixed-bottom {
position: sticky;
}
jsFiddle
My goal is to achieve the following image on my page:
I managed to achieve this with the HTML and CSS you can find below, but it doesn't seem very viable, because the sidebar is losing it's physical height because of the position: absolute.
I'm wondering if it's possible to make one row with two columns on the left and a sidebar on the right, without having to use positioning.
I tried position: relative with a negative top, but since the top col-md-9 has a changing height (depending on what is entered), I can't give it a negative top. It'll simply be too static and impossible to maintain.
Changing the order in the HTML doesn't change anything, since the physical height of the sidebar will move the 2nd content down.
.sidebar {
position: absolute;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-9">
Changing content
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
<div class="col-md-9">
More content
</div>
</div>
I use xs columns for this example, but you can change to md in your page.
Firstly create a 9-column and a 3-column div. Then put two divs inside the 9-column one.
.content, .sidebar {
margin: 10px;
padding: 20px;
}
.content {
background-color: navy;
color: white;
}
.sidebar {
background-color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row wrapper">
<div class="col-xs-9">
<div class="row">
<div class="col-xs-12">
<div class="content">Content</div>
</div>
<div class="col-xs-12">
<div class="content">Content</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="sidebar">Sidebar</div>
</div>
</div>
You can nest col-x-x inside other col-x-x
You just have to create 2 parents: content and sidebar, then add multiple contents into the content parent :
<div class="row">
<div class="col-md-9">
<div class="col-md-12">
Content
</div>
<div class="col-md-12">
More content
</div>
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
</div>
You cannot have more that 12 columns in a row unless it is not defined in your custom grid.
What you can try is this:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-md-3" style="position: relative;">
<div class="row">
<div class="col-sm-12 sidebar">
Sidebar
</div>
</div>
</div>
</div
As a solution, you can make sidebar to stay at the right side of screen if you'll make left section overflow: auto.
.sidebar {
height: 100vh;
background: lightgreen;
}
.left-section {
height: 100vh;
background: lightblue;
overflow: auto;
}
<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-sm-9 left-section">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-sm-3 sidebar">
Sidebar
</div>
</div>
</div>
I have a div that goes to the edge with the browser and would ilke to add content that is aligned to the centered container in the center of the page. I've crated a row with a col-md-6 that I filled with a background color but when I add the container, the content gets aligned to the edge of the browser not to the container's edge.
I am using Bootstrap and really need your help. If I did not articulate the issue properly, I've attached an image that should help.
Thanks for your help.
.login-msg-box {
background: rgba(0,0,0,0.5);
margin-top: 200px;
height: 400px;
}
<div class="row">
<div class="col-md-6 login-msg-box">
<div class="container">
<h2 class="msg-heading-line">LOG IN</h2>
</div>
</div>
</div>
Image shows the current situation and the desired situation
As you did a margin-top for the .login-msg-box, you could for example add a margin-left to your .container. Here's the result :
.login-msg-box {
background: rgba(0,0,0,0.5);
margin-top: 200px;
height: 400px;
}
.container {
margin-left: 200px;
}
<div class="row">
<div class="col-md-6 login-msg-box">
<div class="container">
<h2 class="msg-heading-line">LOG IN</h2>
</div>
</div>
</div>
You can add any number of offset to div
<div class="row">
<div class="col-md-6 col-md-offset-6 login-msg-box">
<div class="container">
<h2 class="msg-heading-line">LOG IN</h2>
</div>
</div>
</div>
I think you are looking for something like this https://jsfiddle.net/neya0v76/1/
I switch everything to xs so it looks right in the fiddle and just restructered your html
<div class="row">
<div class="col-xs-6 login-msg-box">
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
<h2 class="msg-heading-line">LOG IN</h2>
<input type="text"/>
<input type="text"/>
</div>
</div>
</div>
I have three rows in my container. I'd like to apply one background across the bottom two rows. I don't want a background on the 1st row. I want to use one background ac I know I missing something, but can't figure out in the code where to edit it. My background only shows up in the first row of columns.
I don't want to apply a class to each .row that needs the background. The point is to specify the background once and have it apply to the two bottom rows.
Here's my bootply:
http://www.bootply.com/X5WsoQbuM1
Here's my HTML:
<div class="content-section-d">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>How many apples can you eat?</h2>
<p>
The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple. I.</p>
</div>
</div>
<h2>Join us to pick the apples:</h2>
<div class="row centered-text" id="backgroundazul">
<div class="col-md-4 col-xs-12">
<h3>4,000,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>1,500,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>150,000+</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12">
<h3>68,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>2,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>3 years</h3>
</div>
</div>
</div>
<!-- /.container -->
Here's my CSS:
#backgroundazul {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;
}
If you want the background for all row use a class and repeat row
/* CSS used here will be applied after bootstrap.css */
.backgroundazul {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;
}
<div class="container">
<div class="row">
<h2>Join us to access:</h2>
</div>
<div class="row centered-text backgroundazul " >
<hr class="section-heading-spacer">
<div class="col-md-4 col-xs-12">
<h3>4,000,000+</h3>
<p>Apples</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>1,500,000+</h3>
<p>Oranges</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>150,000+</h3>
<p>Mangos</p>
</div>
</div>
<div class="row centered-text backgroundazul " >
<div class="col-md-4 col-xs-12">
<h3>68,000+</h3>
<p>Bananas</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>2,000+</h3>
<p>Honeydew</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>3 years</h3>
<p>Blueberries</p>
</div>
</div>
Apply an id to you .container element and then apply the background to the .row elements.
<div id="backgroundazul" class="container">
<div class="row">
<!-- ... -->
</div>
<div class="row">
<!-- ... -->
</div>
</div>
#backgroundazul .row {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;
}
Updated Bootply. Note that you did not wrap your second row of data in a .row and will not have the background applied. I do not know if this was intentional or not.
The solution is simple - you just need to insert in your css code a single line, so the code will look like:
#backgroundazul{
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
background-size: cover;
padding: 0 0 50px 0;
}
And that's it :-)
I have a background working fine with 1024X768px but when the responsive position turns to 768X1024, my background did not extend up to the footer. In other sizes like 480x320 and vice versa my background repeats vertically. I want my background to extend when responsive position turns to 768X1024 and also in 480c320. Can you tell me the best solution for this?
I tried to use this but it's not working.
#media only screen and (max-width:768px){
.container .mybg {background-size:100%;}
}
*note: need to cut some contents.
Here's my code:
<body>
<div class="container">
<!--Background-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="mybg">
<div class="container">
<div class="row-fluid text-center">
<div class="col-sm-12">
<div class="img-thumbnail">
<img class="img-responsive center-block" src="images/winning
logo.png" alt="...">
<div class="container">
<div class="caption">
<h5>Logo Design</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--END OF MYBG-->
</div><!--END OF Background-->
</div>
<!--bacground pattern 2 underneath-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive center-block" src="images/BG-w-pattern_line_2.png">
</div><!--END OF bacground pattern 2 underneath-->
<div class="container">
<div class="footer">
<div class="container">
<p class="mytext-muted">Copyright © 2014. All rights
reserved. EGT Design.</p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
CSS:
#media only screen and (max-width:768px){
.container .mybg {background-size:100%;}
}
.container .mybg{
background:url(../images/ContentBG.png);}
This should work
.container .mybg {
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}