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
Related
I want my image to be right-aligned. So I did this:
.section {
margin-bottom: var(--double-margin);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="section">
<div class="row">
<div class="col">
<img class="rounded float-right w-50" src="https://via.placeholder.com/1000x200.jpg"/>
</div>
<div class="col">
<p>So other text</p>
</div>
</div>
</div>
</div>
As the result, my image went on the left (because of w-50). So how to tell my image that it should be 50% width and aligned to right?
Here is your example and it works fine. You either need to add a reproducible example of your problem or find the difference between your code and my example. I can guess that for some reason your .col does not grow to 100% of the width that's why the image is aligned to the right side of the smaller container and for you, it looks like it's aligned to left.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<img class="rounded float-right w-50" src="https://via.placeholder.com/1000x200.png"/>
</div>
I am using Bootstrap in a project of mine. I am making divs inside columns but they are not apreading acrosss the full-width of the columns.
This is a sample code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style type="text/css">
.col{
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
<div class="blue" style="background-color: blue;">
1 of 3
</div>
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
</body>
</html>
My question is simple:
"How do I make my <div class="blue"> across 100% width of the original column?"
I also tried setting width to 100%.
UPDATE
I used <div class="row no-gutters"> instead of <div class="row"> and removed the container-fluid. Worked like a charm
you have to use this class in row
"row no-gutters justify-content-md-center"
You want each div to take up 100% of the column? if so, your divs are currently set to col-2, perhaps you should set them to col-12 (with the desired viewport prefix, lg, md, etc...)
This sounds like a CSS issue. By default, columns in the Bootstrap Grid System have 100% width.
My only recommendation would be to check your CSS for the "blue" class. It would need to be:
.blue{
margin: 0px;
...
}
I would also try changing the following in your HTML
<div class="row justify-content-md-center">
to just
<div class="row">
and set the justify-content in your CSS file and see if that helps
basically what I'm trying to achieve using bootstrap is something like this
(https://ibb.co/mBB9P6P). When it's resized to smaller screens it should like
(https://ibb.co/0XnDy2S). Of course with the code I'm using, what happens is that second image goes behind second paragraph
My idea was using Bootstrap's order-first and order-last classes to achieve this and while it works for mobile, on desktop both pictures are on left. What I thought would work was removing a class from a div on different media query but I'm not sure if that's even an option.
<div class="row">
<div class="col-md-3">
<img src="img1.png">
</div>
<div class="col-md-9">
<p>Text</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p>Text</p>
</div>
<div class="col-md-3">
<img src="img1.png">
</div>
</div>
Bootstrap divides the screen up into 12 column grid. If you choose md-3 then you will get four cols max going across. You can specify multiple column formats all in the class attribute. https://getbootstrap.com/docs/4.0/layout/grid/ Hope this helps.
If you're using Bootstrap 4, then you can take advantage of its flex based layout and use the order property. Here is an example:
#media (max-width: 768px) {
.col-md-9 {
order: 2;
}
.col-md-3 {
order: 1;
}
}
img {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/250x150">
</div>
<div class="col-md-9">
<p>Text</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p>Text</p>
</div>
<div class="col-md-3">
<img src="https://placehold.it/250x150">
</div>
</div>
Here is a fiddle to play with: https://jsfiddle.net/2mwxeor5/1/
Drop Bootstrap (it will cause more issues anyway) and use flexbox. The order property will help you.
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-->
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