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
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
First of all, thanks to you all for helping a lot of people!
Second of all, sorry for posting images in Spanish but I have no time to translate it into English. Anyway, text in photos are not relevant.
In this time I'm trying to develop and interactive degree program. Right now, it looks like this:
My idea is to manage card to:
Get same size on all cards
Keep all content (top, middle and bottom) inside cards
Manage middle content (name of a course in Spanish) to resize in favor to preserve card size
For example if i put 150% zoom, everything turn into this:
And if I put 50% zoom it looks about what I'm looking for:
I put a minimize snippet where you can reproduce two courses in one year.
.row {
margin-bottom: 0px !important;
}
#yearHolder {
margin-left: 5px;
}
.col .s12 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.card-content {
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.card.small {
height: 150px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<title>Document</title>
</head>
<body>
<div id="malla" class="row">
<div id="1year" class="col l2 s6 offset-l1"><h6 class="center">First Year</h6>
<div id="yearHolder" class="row">
<div id="1semester" class="col s6">
<div class="col s12">
<div class="card horizontal red">
<div class="card-stacked ">
<div class="card-tabs">
<div class="col left">CBM-1000</div>
<div class="col right">8</div>
</div>
<div class="card-content">
<h6 class="black-text text-flow center-align">Algebra y GeometrÃa</h6>
</div>
<div class="card-tabs ">
<div class="row">
<div class="col left">1</div>
<div class="col right">12,13,15</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="2semester" class="col s6">
<div class="col s12">
<div class="card horizontal red">
<div class="card-stacked ">
<div class="card-tabs">
<div class="col left">CBM-1010</div>
<div class="col right">8</div>
</div>
<div class="card-content">
<h6 class="black-text text-flow center-align">Comunicación Elemental para la Ingenieria</h6>
</div>
<div class="card-tab">
<div class="row">
<div class="col left">1</div>
<div class="col right">12,13,15</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Please advice me if I'm not asking in format to quickly fix in favor to get help
Again, thanks to you all!
Materialize widths should be left alone else this will happen. You seem to be overwriting the purpose of their grid system by using the !important feature. Also by targeting them in this way you will change the markup across your entire website which may not be desired. I would suggest adding a new class name to all those divs, then target your own made up classes.
Sizes:
Add a class to all divs called sameSizeCards
Css:
.sameSizeCards{
Height: ______;
Width: 100%; (let Materialize sort the width)
}
Text sizing:
Use #media queries to scale your text-size based on screen widths.
Materialize provides three utility classes (small, medium and large) for cards that fix the height at 300px, 400px, and 500px respectively:
<div class="card small">
<!-- I will be 300px high -->
</div>
https://codepen.io/doughballs/pen/JjRVOgz
Here is how the blocks are positioned on desktop within a row class which looks good on desktop.
Unfortunately, on xs device this looks not the way we need. I need this order when it's displayed on extra-small device:
1
3
2
Solution that doesn't work: I can't place the block 3 into block 1, as I need full width of block 3 on desktop (the 100% of the screen width, not the 100% of the block 1).
Any ideas how to change the order of 2nd and 3rd blocks with pure css on xs-devices so it is as
1
3
2
,
and not
1
2
3
as it is now?
Thank you.
Any ideas how to change the order of 2nd and 3rd blocks with pure CSS
on xs-devices so it is as
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
.box {
height: 300px;
}
.box-1 {
background-color: orange
}
.box-2 {
background-color: blue;
}
.box-3 {
background-color: green;
}
</style>
</head>
<body>
<div class="box box-1 col-sm-8 col-xs-12">
</div>
<div class="box box-2 col-sm-4 hidden-xs">
</div>
<div class="box box-3 col-xs-12">
</div>
<div class="box box-2 col-xs-12 hidden-sm hidden-md hidden-lg">
</div>
</body>
</html>
You might consider this solution in case there's no solution out there can help achieve your required behaviour with pure CSS
It is important to also include Container and Row.
https://getbootstrap.com/docs/4.0/layout/grid/
Does the original code look like this?
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-12">
1
</div>
<div class="col-sm-4 col-xs-12">
2
</div>
</div>
<div class="row">
<div class="col-sm">
3
</div>
</div>
</div>
Assuming block 2 has a fixed height and its always at most the same height with block one, you can do the following:
CSS:
<style type="text/css">
.wrap {
position: relative;
}
.block1 {
padding-right: 33.3333%
}
#media(min-width: 768px) {
.block2 {
position: absolute;
top: 0;
right: 0;
width: 33.333%;
}
}
</style>
HTML:
<div class="wrap">
<div class="block1">
<div class="col-sm-12">Block1</div>
</div>
<div class="col-sm-12">Block 3</div>
<div class="block2">
<div class="col-sm-12">Block 2</div>
</div>
</div>
Please note that with this method, if block 2 is longer than block one, it will overflow on block 3.
You cannot change the order of columns in smaller screens but you can do that in large screens.
So change the order of your columns.
<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>
<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>
By default this displays the main content first.
So in mobile main content is displayed first.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.
Column Reordering in Bootstrap
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>
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