I am currently building a web page and encountered the following problem and would appreciate if someone helped me solve it:
I want to have a full-width background image for every "section" (div) of the page. Within this background, there is a smaller div for content (text). On the right, there is a scrolling sidebar which scrolls with the user. I could not find how to have a full-width div and the sidebar(which is a div element with descendants) going over it?
The current structure looks like:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="col-md-9">
here go all the "sections"...
</div>
<div class="col-md-3">
and that is the sidebar...
</div>
</div>
</body>
So in short, what is needed is background images with some html content on top of them and a sidebar on the right (but being covered by the image). Thank you in advance!
So I guess that means you plan to make a fixed sidebar? You need to put the columns in a row. Make the row have the background-image. Position the sidebar fixed, this makes the bootstrap class ineffective but you can make the width 25% so it stays responsive. You may need to add some padding/margin, but I made something up quick with random colors so you can get the idea.
#sidebar{
position:fixed;
right:0;
top:0;
background-color:rgba(0,0,0, .5);
width:25%;
color:white;
}
.blue{
background-color:blue;
}
.white{
background-color:white;
}
.red{
background-color:red;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row red">
<div class="col-md-9">
Section 1
</div>
<div class="col-md-3" id="sidebar">
and that is the sidebar...<br/>
ber<br/>
baer
badsr
</div>
</div>
<div class="row white">
<div class="col-md-9">
Section 2
</div>
</div>
<div class="row blue">
<div class="col-md-9">
Section 3
</div>
</div>
</div>
</body>
You need to create a div outside of your container class. That div can be set to a full width.
<div class="row"> <!-- begins full width row-->
<div class="container">
<div class="col-md-9">
here go all the "sections"...
</div>
<div class="col-md-3">
and that is the sidebar...
</div>
</div>
</div><!-- ends full width row-->
Related
I create page with 3 columns with bootstrap5:
<div class="container">
<div class="row">
<div class="col-md-3">LEFT</div>
<div class="col-md-6">CENTER</div>
<div class="col-md-3">RIGHT</div>
</div>
</div>
Now in columns left and right there are advertisements with 300px width. How to restrict left and right column to shrink less then 300px, and to shrink just a center column.
If i set min-width:300px on left and right, then right column is pushed down.
Don't use fixed (proportionate) column sizing. Use Flex. Here's an example. I've reduced the image size for this demo, but it works the same with 300px images.
You may want to change behavior for mobile, maybe to stack everything so it doesn't wrap oddly. I'm not sure of your goals.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="d-flex flex-wrap">
<div><img src="https://via.placeholder.com/200"/></div>
<div class="flex-fill">CENTER</div>
<div><img src="https://via.placeholder.com/200"/></div>
</div>
</div>
You can mimic the same (stacked to horizontal) behavior of .col-md-*s in a .row with flex toggling wrapping at the medium breakpoint with .flex-wrap.flex-md-nowrap.
Try this:
.ad {
width: 300px;
background: cyan;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container-fluid">
<div class="d-flex flex-wrap flex-md-nowrap">
<div class="ad">LEFT</div>
<div class="w-100">CENTER</div>
<div class="ad">RIGHT</div>
</div>
</div>
The simplest way is to use the Grid auto-layout columns. col-auto will shrink to fit its content (the ads). Then, use flex-nowrap to prevent wrapping...
<div class="container">
<div class="row flex-md-nowrap">
<div class="col-md-auto">
<img src="//via.placeholder.com/300" />
</div>
<div class="col-md">CENTER</div>
<div class="col-md-auto">
<img src="//via.placeholder.com/300" />
</div>
</div>
</div>
Responsive Demo
I'm trying to use Bootstrap 4.5 to have a div positioned over two existing divs. Rather than trying to describe it with text, this picture illustrates what I am trying to achieve:
The navy and pink are two columns, and the white is outside of both of them.
My attempts to recreate something similar have not been succusfull. My current attempt is thus:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="row pb-3" style="height: 520px;">
<div class="p-3" style="float:left; background:red; height:220px; width:200px; z-index: 2;"> </div>
<div class="col-md-3" style="background:blue;"> </div>
<div class="col-md-9" style="background:pink;"> </div>
</div>
</body>
</html>
Obviously this approach is not working. I'm not sure why it is not. What is the right approach to implement something like in the picture?
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="row pb-3" style="height: 520px; position: relative">
<div class="p-3" style="position:absolute; top: 100px; background:red; height:200px; width:200px; z-index: 2;"> </div>
<div class="col-md-3" style="background:blue;"> </div>
<div class="col-md-9" style="background:pink;"> </div>
</div>
</body>
</html>
Note that the absolutely positioned div will cover the content in the others. Generally speaking by the way, float is nasty and to be avoided now that we have flex and grid and so on. It may be necessary if you need the content to flow around something, but usually it can and should be avoided.
I have this order in my grid when it's a normal sized computer screen:
{1}{2}
{3}{4}
{5}{6}
When i make the screen smaller i want it to reorder, but it doesn't reorder correctly.
Actual:
{1}
{2}
{3}
{4}
{5}
{6}
Wanted:
{1}
{3}
{5}
{2}
{4}
{6}
What kind of CSS formatting do I have to use to achieve the wanted display of my elements.
Current CSS:
.general {
background-color: pink;
order: 1;
}
.anonymous{
background-color: aqua;
order:4;
}
.dead{
background-color: blue;
order: 2;
}
.dead-and-archived {
background-color: green;
order:5;
}
.created {
background-color: yellow;
order:3;
}
.private {
background-color: red;
order:6;
}
Current HTML:
<div class="container-fluid">
<div class="row">
<div class="general col-sm-4" >
General
</div>
<div class="anonymous col-md-8">
Anonymous
</div>
</div>
<div class="row">
<div class=" dead col-md-4">
Dead entities
</div>
<div class=" dead-and-archived col-md-8">
Dead and archived
</div>
</div>
<div class="row">
<div class="created col-md-4 ">
Created entities
</div>
<div class="private col-md-8">
private user repos
</div>
</div>
</div>
What you should do is just change the way you put your content in divs.
Unless your HTML is set in stone, the most obvious way to get what you want is to structure your HTML so that it facilitates what you want.
If you want
{{1},{4}}
{{2},{5}}
{{3},{6}}
You shouldn't do
{{1},{2}}
{{3},{4}}
{{5},{6}}
Change your html so that it looks like this at a structural level:
<div class="column">
<div class="row">
square 1
</div>
<div class="row">
square 2
</div>
<div class="row">
square 3
</div>
</div>
<div class="column">
...
</div>
Now use CSS to give the columns a width so that they are next to eachother, and when you use a mobile device, the right one is placed under the left one.
The alternative way to do this is to add responsive css rules that apply absolute positioning, but really, that is just a nasty way to accomplish what you want.
I hope this will be helpful:
N.B. feel free to change the classes value according with your needs
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="col-xs-12 col-sm-6">
<div class="col-xs-12">1</div>
<div class="col-xs-12">3</div>
<div class="col-xs-12">5</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="col-xs-12">2</div>
<div class="col-xs-12">4</div>
<div class="col-xs-12">6</div>
</div>
</div>
</body>
</html>
Now, this is a new project, so I need some help.
I have the following code. Please press full screen.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<head>
<title>Stack Overflow Question</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="style/home.css">
<!-- Reference to main CSS Style File-->
<style>
ul {
margin:0 auto;
border-top:2px solid #000;
border-bottom: 2px solid #000;
padding:10px;
text-align: center;
font-family:"montserratlight";
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="container">
<div id = "navigation">
<p>
<ul class="col-md-12">
<!-- MAIN NENU BAR -->
<li><b>Home</b></li>
<li>Why Does This</li>
<li>Not</li>
<li>Work</li>
</ul>
<!-- Unordered lists.-->
</p>
</div>
<div class = "row">
<!-- Declaration of First Row -->
<div class="imageHolder col-md-12 hvr-underline-from-center">
<!-- Image Container as DIV -->
<div class = "imageInside" >
<img id = "imageHomeJPG" src="http://s30.postimg.org/8wav359r5/NYC.jpg" style="width:100%" />
</div>
<!-- Image Link -->
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="about.html">
<img src = "http://s30.postimg.org/mehrfflwh/Place1.jpg" style="margin-bottom:10px; margin-top:10px; width:100%;"/>
</a>
</div>
<div class="col-md-6">
<a href="about.html">
<img src = "http://s30.postimg.org/iw5rj1l0h/Place2.jpg" style="margin-bottom:10px; margin-top:10px; width:100%;"/>
</a>
</div>
</div>
</body>
</html>
Now, when expanded, this is what the website shows.
However, there is a small gap between both column 6 photos.
<div class="row" style="padding-right:0">
<div class="col-md-6">
IMAGE TAG
</div>
<div class="col-md-6" style="padding-left:0">
IMAGE TAG
</div>
This produced the following -
You can see that the image on the left is bigger on the right and therefore it is not correct.
My question is, how can I make the gap between the two columns smaller (to around 10px) without needing to change the padding? I want to make the images bigger in order to decrease the size of the gap, but I can't seem to find a way!
Thanks.
Make a class :
no-space {
Width: 100% !important;
Margin: 0px !important;
}
Then put this class in next to where col-md-6 is seep rated by a space like this :
Class="col-md-6 no-space"
And there should be no spaces between the photos now.
To actually solve this question too, what I can also do is go to the Bootstrap CSS file and edit the padding-left and padding-right values to equal amounts. Originally, both values are set at
padding-left:15px;
padding-right:15px;
but looking at other examples such as airBnb, their padding is both set at 12.5 so this is also another solution.
Just started playing around with bootstrap 3 and I can't get gutters between columns to work.
I created the most basic code to test with:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"> </script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<style>
.box1 {
background-color: green;
}
.box2 {
background-color: blue;
}
</style>
</head>
<div class="container">
<div class="row">
<div class="col-lg-4 box1">
<h1>Test</h1>
</div>
<div class="col-lg-8 box2">
<h1>Test2</h1>
</div>
</div>
</div>
</html>
And the result is just one big green/blue box without any gutter in between the two columns.
I have also tried it on a fiddle with no luck http://jsfiddle.net/Tgkkb/
What am I missing?
Bootstrap 3 switched to using padding for the gutters rather than margins. So, the content is parted, but the boxes aren't. And a background-color will fill the padding as well.
Though, you should be able to get the desired effect by setting the background on inner boxes:
<div class="row">
<div class="col-sm-4">
<div class="box1">
<h1>Test</h1>
</div>
</div>
<div class="col-sm-8">
<div class="box2">
<h1>Test2</h1>
</div>
</div>
</div>
http://jsfiddle.net/PFxUk/
Though, the goal is just to apply the background to a single, wrapping child. So, if the headers definitely won't have any siblings, then you can possibly forgo the additional <div>s:
<div class="row">
<div class="col-sm-4">
<h1 class="box1">Test</h1>
</div>
<div class="col-sm-8">
<h1 class="box2">Test2</h1>
</div>
</div>
http://jsfiddle.net/G2gbG/
If you want to set the padding or margin for your columns, you can use the row-no-gutters class on the row (introduced in v3.4.0) and add your own padding and background.
https://getbootstrap.com/docs/3.4/css/#grid-remove-gutters