I've read 5-6 question / answers but can't find what I'm looking for _
Bootstrap 4 columns aren't behaving the way I expect them to. Below about 600px device width the edge overflows instead of continuing to reduce in size
at 618px the columns are still reducing
at 538px the columns are overflowing
HTML:
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-12">
<div class="outerDivBorder" id="photoBox">
<div style="height: 10em;"></div>
</div><!-- /#photoBox -->
</div>
<div class="col-lg-3 col-md-12">
<div class="outerDivBorder" id="dataBox">
<div style="height: 10em;"></div>
</div><!-- /#dataBox -->
</div>
</div>
</div><!-- /.container -->
CSS:
.outerDivBorder {
width: 100%;
border: 1px solid #454343;
padding: 0 1rem;
margin: 1rem;
margin-top: 1.5rem;
margin-bottom: 2rem;
}
Thanks in advance for any guidance offered on this : )
You put margin: 1rem; on .outerDivBorder, and that margin pushes content out on small screens. Use padding on cols instead - it can be done by using utility class for padding, py-3 in this case:
.outerDivBorder {
width: 100%;
border: 1px solid #454343;
padding: 0 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-12 py-3">
<div class="outerDivBorder" id="photoBox">
<div style="height: 10em;"></div>
</div>
</div>
<div class="col-lg-3 col-md-12 py-3">
<div class="outerDivBorder" id="dataBox">
<div style="height: 10em;"></div>
</div>
</div>
</div>
</div>
Had a similar problem. On mine it was happening because of
* {
box-sizing: inherit;
}
Bootstrap already reset that to border-box and the col's and row's behave according to that.
Related
I know this has been asked quite a few times here. But I'm not very experienced with HTML and am stuck following solutions suggested here.
My current implementation is like this. But the problem is if I stretch and adjust the browser window size, the borders of the four equal-sized quadrants follows. What I would like is:
The top area would be reserved for a load button and filter boxes.
The rest of the area would be divided up into four equally-sized quadrants.
When the browser window is adjusted, all five of these areas should not overflow into each other.
If I insert <div>'s inside each quadrant to draw plots, they should gracefully fall into place and will occupy four equally-sized areas regardless of the browser's size change.
What I'm trying to achieve looks something like in the picture below:
Thank you in advance for the help!
You can divide your 4 quadrants into 2 rows.
And give each row 100% width
and each quadrant a width of 50%
also,
make quadrants float left.
.row {
width: 100%;
padding: 0;
margin: 0;
}
.quad {
border: 1px solid black;
border-radius: 8px;
width: 49%;
padding: 0;
margin: 0;
height: 200px;
float: left;
}
<div>
<select><option>A</option></select>
<input type="button" value="Filter" />
</div>
<div class="row">
<div class="quad">
1 of 4
</div>
<div class="quad">
2 of 4
</div>
</div>
<div class="row">
<div class="quad">
3 of 4
</div>
<div class="quad">
4 of 4
</div>
</div>
Note: I have given 49% to quadrants so as to accommodate borders (they have 2 px width [1px each side])
You can also do this using flex CSS if you are targetting newer versions of browsers only.
In that case, you do not have to worry about widths.
Just give your row div : display: flex;
and your quadrants: flex: 1 1 auto;
Read more here about the flex display.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
.row {
display: flex;
}
.quad {
flex: 1 1 auto;
border: 1px solid black;
border-radius: 8px;
height: 200px;
}
<div>
<select><option>A</option></select>
<input type="button" value="Filter" />
</div>
<div class="row">
<div class="quad">
1 of 4
</div>
<div class="quad">
2 of 4
</div>
</div>
<div class="row">
<div class="quad">
3 of 4
</div>
<div class="quad">
4 of 4
</div>
</div>
Using bootstrap 4 you can easily create such an layout. Bootstrap makes it much easier for developers to create a layout.
If you wanna use bootstrap, you can do following. Bootstrap 4 uses flexbox instead of float which is +1 comparing to bootstrap 3.
.vh-100 {
min-height: 100vh;
}
.choose-plot {
padding-top: 15px;
padding-bottom: 15px;
}
.bordered {
border: 1px solid #ccc;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js" integrity="sha384-u/bQvRA/1bobcXlcEYpsEdFVK/vJs3+T+nXLsBYJthmdBuavHvAW6UsmqO2Gd/F9" crossorigin="anonymous"></script>
<div class="container-fluid d-flex h-100 flex-column vh-100">
<!-- I want this container to stretch to the height of the parent -->
<div class="row">
<div class="col choose-plot">
<strong class="mb-2">Add/remove COUNTRIES (max: 5), ADVERTISES (max 4), YEAR (max 1), and plot location below. Then, click 'load plot'.</strong>
<div class="row">
<div class="col-4">
<select class="custom-select">
<option>Choose plot</option>
</select>
</div>
<div class="col-8">
<button class="btn btn-primary">Load plot</button>
</div>
</div>
</div>
</div>
<div class="row flex-fill d-flex justify-content-start">
<div class="col-6 bordered">1 of 4</div>
<div class="col-6 bordered">2 of 4</div>
<div class="col-6 bordered">3 of 4</div>
<div class="col-6 bordered">4 of 4</div>
</div>
</div>
Dividing into rows too,
I suggest you to use box-sizing: border-box; so that when you set width to 50%, the borders sizes are taken into account.
.col {
width: 50%;
height: 160px;
float: left;
box-sizing: border-box;
border: 2px solid gray;
border-radius: 4px;
padding: 4px;
}
<div>Something here.</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
</div>
<div class="row">
<div class="col">3</div>
<div class="col">4</div>
</div>
Hope it helps.
I am having a doubt with the grid system, it's easy but I'm struggling for the moment, lets say that I need to do a correct implementation for the grid of bootstrap, What I'm trying to do with bootstrap is doing this example:
So I thought that it's very easy to do, but for some reason I'm not in the correct way or maybe yes, because with the next code:
<div class="container bank-payment">
<div class="row">
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
</div>
<div class="row bank-payment">
<div class="col-xs-6 col-md-2 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
<div class="col-xs-6 col-md-2 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
<div class="col-xs-6 col-md-2 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
<div class="col-xs-6 col-md-2 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
</div>
</div>
I'm having this results:
The thing is... the first one is for me the correct because it meets the condition of standards but the space between them is very long, I need to put in 8px in space for every image from right/left and bottom, but the second row meets the condition too to reduce the space but it doesn't meet the standard... so how I can solve this part ???
and here my css code:
.bank-payment {
text-align: center;
.image-bank {
//margin-bottom: 8px;
margin-top: 8px;
//margin-right: 8px;
vertical-align: middle;
display: inline-block;
}
}
These 2 parts of Bootstrap grid system will solve your problem:
https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment
https://v4-alpha.getbootstrap.com/layout/grid/#offsetting-columns
here you can take an example of how set the position of each column.
and probably you wont need the Display: inline-block, because the bootstrap grid system already have his way to display it correctly. If you really need an example, just let me know, but I think the links above will get it for you.
EDIT
It was really hard to make it exactly like you expected in Bootstrap, so I created my own classes, see if it helps you:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<style>
#media (max-width: 768px) {
.center-content {
display: block;
margin: auto;
width: 420px;
}
.col-md-2_6 {
flex: 0 0 50%;
max-width: 50%;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 5px;
}
.devices-disappear {
display: none;
width: 0;
height: 0;
}
}
#media (min-width: 769px) {
.coloriz-margin {
min-height: 28px;
min-width: 90px;
font-size: 16px;
}
.coloriz {
border: 1px solid black;
min-height: 28px;
min-width: 90px;
font-size: 16px;
}
img {
display: block;
margin: auto;
height: 28px;
width: 90px;
}
.center-content {
display: block;
margin: auto;
width: 640px;
}
.col-md-2_6 {
flex: 0 0 20%;
max-width: 20%;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 5px;
}
}
</style>
</head>
<body>
<div class="center-content">
<div class="row">
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="devices-disappear col-md-2_6 coloriz-margin"><!-- let empty to occupy the white space--></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="devices-disappear col-md-2_6 coloriz-margin"><!-- let empty to occupy the white space--></div>
</div>
</div>
</body>
this make the columns use the right size. Keep in mind that I used the latest Bootstrap (4.0 beta)
To get the logos to fill the space of the column, use the class "img-responsive". It will remove the long spacing. The only issue, is that the logos will appear very large if you are using the container class with a width of 1200px or min-width of 1200px. So a better solution, is putting the row columns inside another row column with three "col-md-4" columns. Just add your logo box to the middle.
<div class="container bank-payment">
<div class="row">
<div class="hidden-xs col-md-4">
</div>
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28" class="img-responsive" >
</div>
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28" class="img-responsive" >
</div>
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28" class="img-responsive" >
</div>
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28" class="img-responsive" >
</div>
</div>
</div>
<div class="hidden-xs col-md-4">
</div>
</div>
</div>
I'm not a big fan of bootstrap especially when it comes to the grid system. Flexbox works much better, and is a little dryer code.
.bank-payment {
display: flex;
max-width: 490px;
flex-wrap: wrap;
justify-content: center;
}
.image-bank {
margin: 8px 4px;
}
I know you were asking specifically about bootstrap, but to get your desired outcome, and do less to keep it responsive. Remove the bootstrap classes and rows to avoid confusion.
My homepage consists of multiple blocks(top part/mid part/bottom part). I've created a row for each block. I want to add some space between my blocks in Bootstrap. Can I simply give my rows id's and add some margin, or is this wrong?
Structure of my code:
<div class="container" id="ho_main_content">
<div class="row">
<div class="col-md-12 text-center"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
This "answer" of mine should really be a comment; however, I don't have enough rep.
For an answer, yes, give the divs with the row class another class, probably something like this, spacing the top and bottom of each 10px:
.part {
margin: 10px 0;
}
An important thing to think about when using frameworks like bootstrap is that it isn't the end of the world if you modify the components or spacing or something. Some things won't look like you want them to; just give them extra classes, or if you are desperate, use the !important flag. It was built on the same technology, after all.
In bootstrap 5 I add g-0 to g-5 class with row class to add space around each col.
EX.
<div class="row g-3">
<div class="col">...</div>
<div class="col">...</div>
</div>
https://getbootstrap.com/docs/5.0/layout/gutters/
/*you can create your own custom css for use here is some example*/
.border {
border: 1px solid red; /* just to make sure space between blocks*/
}
.margin-top {
margin-top: 5px;
}
.nopad{
padding:0 ;
}
div[class*='spacer-'] { display: block; }
.spacer-mini { height: 20px; }
.spacer-small { height: 40px; }
.spacer-medium { height: 60px; }
.spacer-big { height: 100px; }
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container" id="main_content">
<div class="row border margin-top">
<div class="col-md-12 text-center">text1</div>
</div>
<div class="row border margin-top">
<div class="col-md-12">text2</div>
</div>
<div class="spacer-mini"></div> <!-- Using Spacer-Mini and avoiding the margin top -->
<div class="row">
<div class="col-md-6 col-xs-6 border">part1</div>
<div class="col-md-6 col-xs-6 border">part2</div>
</div>
</div>
</body>
I am trying to implement a design from my graphic designer, which whilst looks cool is giving me some headaches as i don't know how to implement in bootstrap.
We have a call to action section, which aligns with the 12 column grid system on its left and right extremes.
It also stretches to the view-port edges:
On the left we have red background stretching all the way to the view-port edge.
On the right we have a grey background image stretching all the way to the view-port edge.
I haven't been able to find a search term for what I am looking to achieve let alone where to start (other than have the cta use the background for the entire width, then overlay a left element over the top).
Any idea on how to code the below graphical layout in bootstrap please?
<section class="cta" style="background: grey; position: relative">
<div class="red" style="position: absolute; left: 0; width: 10%; background: red"></div>
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
Using <div class="container-fluid"> as a starting point; I am guessing at your page's layout. Let's try this:
See below:
.cntn {
border: 1px red solid; /* you can remove this (not needed) */
}
.red {
background-color: red;
text-align: right;
margin: 0; /* optional */
width: 100px; /* adjust to suit your needs */
float: left;
}
.cta {
margin: 0; /* optional */
float: right;
border: 1px solid green; /* you can remove this (not needed) */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- make container fluid -->
<div class="container-fluid">
<div class="row">
<!-- heading area: hexagon -->
<div class="red">
<img src="http://placehold.it/100/100" />
</div>
<!-- heading area: call-to-action -->
<section class="cta">
Action
</section>
</div>
<div class="row cntn">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
Simply change 'div class="container"' to 'div class="container-fluid"'
Something like this? Where black should be the grey gradient and max-width:400px could be anything.
.cta {
overflow-x: hidden;
position: relative
}
.text-outer .container {
width: 100%;
max-width: 400px;
background: grey;
z-index: 2;
position: relative;
}
.text-outer:before,
.text-outer:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
top: 0;
}
.text-outer:before {
background-color: red;
left: 0;
}
.text-outer:after {
background-color: black;
right: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="cta">
<div class="text-outer">
<div class="container">
<div class="row">
<div class="col-xs-6">left</div>
<div class="col-xs-6">right</div>
</div>
</div>
</div>
</section>
jsFiddleLink
I created with 3 divs as Left Center and Right but if you want to use Left and center then create your own class. Probably following will work
.custom {
width:calc(100% - (50% - 768px/2));
}
.custom {
width:calc(100% - leftCellWidth);
}
You can set height of left as per height of hex image.
Use jumbotron class outside the class container for full-width, as explained here.
HTML:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="red col-xs-4">
</div>
<div class="grey col-xs-8">
</div>
</div
</div>
</div>
CSS:
.red {
background: url('awesomeredimage.png');
background-size: cover;
}
.grey {
background: url('awesomegreyimage.png');
background-size: cover;
}
All your divs should be wrapped in the container div. And as some others have also suggested: container-fluid helps.
Within container fluid you can add a regular container for the rest of your content. My code below explains this.
You could take the easy route and just use the entire cta image you've posted as a clickable image with .img-responsive in a col-xs-12. In that case my fix takes you about 2 minutes:
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<img src="/img/cta.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
But you could also hack the design into cols, as I try to show in the code snippet below. Of course you need to tweak and decide on the exact sizes yourself.
<section style="background: grey; position: relative">
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 red">
<img src="/img/hexagon.png" class="img-responsive pull-right">
<!--and give this img a negative margin to flow over to the grey area-->
</div>
<div class="col-xs-1 grey-image"></div>
<div class="col-xs-3 grey-image">
<h3 class="text-center">Call to action</h3>
<p class="text-center">Discount etcetera</p>
</div>
<div class="col-xs-5 grey-image">
<button class="btn center-block">Request quote</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="container">
<!-- All you other content here-->
</div>
</div>
</div>
</div>
</section>
Use class="container-fluid" instead of class="container" and than do this style:
.container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}
I need to adjust Bootstrap columns to look like this.
The thing is that on smaller devices I just want to hide this blank areas on the sides, thus I don't wanna use just margins or paddings.
How can I achieve that? col-md-1 seems too small for the indents, while col-md-2 is too broad.
My Codepen with Bootstrap included.
HTML
<div class="container">
</div>
CSS
.container {
height: 230px;
background-color: blue;
max-width: 1050px;
padding-left: 15px;
padding-right: 15px;
}
If you don't want to declare any new classes padding etc. You can simply nest the columns bootply.com
Not really sure what you're trying to achieve here. The container changes it width depending on the screen size using media queries. The white/blank space you're trying to get rid off is disappearing when the size of the screen is less than 768px.
What you can do, if I understand your question correct is this option:
HTML:
<!-- CONTAINER -->
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
</div>
</div>
</div>
</div>
<!-- CONTAINER FLUID -->
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
<div class="col-md-3">
This is column nested inside
</div>
</div>
</div>
</div>
</div>
CSS:
.container-fluid,
.container {
height: 230px;
background-color: #333;
/* max-width: 1050px; */
padding-left: 15px;
padding-right: 15px;
margin-bottom: 15px;
}
html, body {
color: #fff;
}
Couldn't you just use a #media tag to cut the padding out when in mobile view? Makes it a lot easier. Just add the class below to either your container or row.
.marginClass{
margin: 0 15px 0 15px;
}
#media screen and (min-width: 480px) {
.marginClass{
margin: 0;
}
Actually you're probably better using margin. I've updated that.