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.
Related
I am working with Bootstrap 4 and am trying to have a grid of 4 images, 2 on top and 2 on bottom. I am using the img-fluid class but the image resizes based on the width only making the image height too large and it is getting cut off. I tried setting max-height: 100% but that didn't work.
What's going wrong?
.images-container {
height: 95vh;
}
.nav-button {
width: 100%;
height: 50%;
margin: auto;
font-size: 5em;
color: black;
}
.footer-container {
text-align: center;
}
.bottom-nav-box {
font-size: 1.5em;
margin: 0;
}
.sim-image {
max-height: 100%;
}
i {
margin: auto;
}
body {
height: 100%;
}
html {
height: 100%;
}
footer {
height: 5vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-10 h-100 center-container">
<div class="row images-container">
<div class="row top-images-row h-50">
<div class="w-50 d-inline-block image-div">
<img src="https://lorempixel.com/875/656/" class="sim-image" id="simulatorImageTopLeft">
</div>
<div class="w-50 d-inline-block image-div" id="simulatorImageTopRight">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageTopRight">
</div>
</div>
<div class="row bottom-images-row h-50">
<div class="col image-div center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomLeft">
</div>
<div class="col image-div center-block text-center">
<div class="row">
<div class="col center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
</div>
<div class="col center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
</div>
</div>
</div>
</div>
</div>
</div>
Not 100% sure I'm interpreting the question correctly, but if you want a 2×2 grid of images then you should just be able to do it relatively quick like this;
html:
<div class="panel">
<img src="blah" />
<img src="blah" />
<img src="blah" />
<img src="blah" />
</div>
css:
.panel {
width = whateversizeyouwant;
height = whateversizeyouwant;
display: flex;
flex-wrap: wrap; //the flex stuff should make it display 2×2
}
.panel > img {
width: 50%;
height: 50%;
}
That should work for any set of 4 images.
If you want them to stay the same aspect ratios then under .panel > img set height: auto. Keep in mind this won't give you a perfect square, and the size of the panel div will impact how the images can be sized.
I am trying to vertically align and I can not find the solution. I have read so many stack overflow questions and I am not sure what I am doing wrong. Here is my HTML:
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<form class="order-form">
<div class="row first-row">
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order 123456789</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order Date: 8/28/18</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order Status: OP</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Ready Status: RD</span>
</div>
<div class="col-xs-12 col-sm-4 v-middle">
<span>Facility 123 Dudley Chip-N-Saw</span>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
and here is my SCSS:
$font-family: "roboto", "open-sans";
body {
font-family: $font-family;
padding-top: 5%;
.order-form {
text-align: center;
position: relative;
display: block;
label {
display: block;
}
.first-row {
font-size: 16px;
.v-middle {
display: inline-block;
vertical-align: middle;
}
}
}
}
I a using Bootstrap v3 so I can not use the alignment classes Bootstrap 4 provides. I am not sure what else is required for vertical align besides display being inline. I know vertical alignments do not work on block level items. Please help Thanks!
Here is my codepen: https://codepen.io/sazad/pen/BOZWOV
but Please shrink screen to make sure when the line breaks the text is vertically aligned middle. Thanks!
Your .v-middle elements inherit float from the col-.. elements, thats why you can't vertically align them. Simply add float: none to that class to fix it.
You will also have a problem with whitespaces in-between display: inline-block elements. A lot of ways to fix those, my favourite fix for those is adding font-size: 0 to parent.
Final code:
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<form class="order-form">
<div class="row first-row">
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order 123456789</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order Date: 8/28/18</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order Status: OP</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Ready Status: RD</span>
</div>
<div class="col-xs-12 col-sm-4 v-middle">
<span>Facility 123 Dudley Chip-N-Saw</span>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
$font-family: "roboto", "open-sans";
body {
font-family: $font-family;
padding-top: 5%;
.order-form {
text-align: center;
position: relative;
display: block;
label {
display: block;
}
.first-row {
font-size: 0;
.v-middle {
display: inline-block;
vertical-align: middle;
float: none;
font-size: 16px;
}
}
}
}
Also a small suggestion. Don't nest selectors that heavily (for ex. order-form doesn't need to be nested inside body).
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.
I need to create a kind-of 'outter' container of images to surround a div which contains text. Please see the attached image for a rough idea of what i'm trying to achieve. I've tried using columns with bootstrap but I'm unable to create the image overlap effect (on the right-hand side).
<!-- Top Layer -->
<div class="col-md-12"><img src="image1.png"></div>
<!-- Left Layer -->
<div class="col-md-3"><img src="image2.png"></div>
<!-- Text (Middle) -->
<div class="col-md-6"><p>This is the text This is the text</p></div>
<!-- Right Layer -->
<div class="col-md-3"><img src="image3.png"></div>
But this obviously causes problem with the long image on the right-hand side.
Any ideas how to complete this with CSS?
Any help would be greatly appreciated. Thanks
I would do it as 3 columns, although you haven't described how you would like this to look on smaller screens as the columns will collapse in order. The below snippet is a rough example of what you could do.
.padded {
padding: 1px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Left Column -->
<div class="center-block" style="width: 80%">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
</div>
<!-- Text (Middle) -->
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="text-center">
<img src="http://via.placeholder.com/200x100" class="padded" />
</div>
<div class="panel">
This is the text This is the text
</div>
</div>
<!-- Right Column -->
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="row">
<img src="http://via.placeholder.com/100x200" class="padded" />
</div>
<div class="row">
<img src="http://via.placeholder.com/100x100" class="padded" />
</div>
</div>
</div>
</div>
Alright, from what i can get, you need to arrange the images kind-of as an inverted 'U'- shaped and place the text in the between of the two side images. The idea is to float the images left or right accordingly and then set the display of the text as inline-block.
The following code places 4 boxes in an arrangement as asked in the question, you can align them as you want using margin-left property.
NOTE This arrangement is only possible if the boxes/divs are wide enough, so make sure to adjust the widths of each div. Not necessarily as i have done you can change it as you wish, just make sure that the boxes are wide enough to fill in the page or the arrangement will not show up.
#top{
display: inline-block;
height: 20%;
width: 50%;
background-color: red;
}
#left{
height: 50%;
width: 25%;
float: left;
background-color: blue;
}
#text{
height: 50%;
width: 50%;
background-color: green;
text-align: center;
float: left;
}
#right{
height: 50%;
width: 25%;
background-color: yellow;
float: right;
}
<body>
<div id='top'></div>
<div id='left'></div>
<div id='right'></div>
<div id="text"></div>
</body>
EDIT Don't know why stackOverflow is not able to show the result on running this code, but i suggest you copy it and run it manually, it will show something like the image attached.
Something like this?
.left-container, .right-container {
width: 60px;
float: left;
}
.center-container {
float: left;
}
.img-small {
width: 40px;
height: 40px;
margin: 10px;
background-color: green;
}
.img-big {
width: 40px;
height: 80px;
margin: 10px;
background-color: green;
}
.img-wide {
width: 80px;
height: 40px;
margin-top: 10px;
background-color: green;
}
.text {
width: 80px;
height: 120px;
margin-top: 10px;
background-color: blue;
}
<body>
<div class='left-container'>
<div class='img-small'></div>
<div class='img-small'></div>
<div class='img-small'></div>
<div class='img-small'></div>
</div>
<div class='center-container'>
<div class='img-wide'></div>
<div class='text'></div>
</div>
<div class='right-container'>
<div class='img-small'></div>
<div class='img-big'></div>
<div class='img-small'></div>
<div class='img-small'></div>
</div>
</body>
I'm trying to build a webpage with the bootstrap 3 framework and the less tool.
For one special page I'd like to center the container horizontally and vertically. I know there are allready some questions out there, but for me they do not work.
So this are the solutions i've tried following:
HTML:
<div class="container hvcenter" > <!-- Container -->
<div class="row"> <!-- Bootstrap Row -->
<div class="col-sm-4">
<img src="img/logo.png" alt="logo" class="img-responsive">
</div>
<div class="col-sm-offset-1 col-sm-7">
<p>Textblock ... </p>
</div>
</div>
</div>
CSS:
.container {
max-width: 85%;
padding-top: 3em;
padding-bottom: 3em;
background-color: silver;
border-radius: #border-radius-large * 6;
}
.hvcenter {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
This effects thath the div is centered horizontally, but not vertically.
An other try was to build in one mor class for vertical alignment and to use the builtin solution for horizontal alignment (.center-block):
HTML:
<div class="container center-block vcenter" > <!-- Container -->
<div class="row"> <!-- Bootstrap Row -->
<div class="col-sm-4">
<img src="img/logo.png" alt="logo" class="img-responsive">
</div>
<div class="col-sm-offset-1 col-sm-7">
<p>Textblock ... </p>
</div>
</div>
</div>
CSS:
.container {
max-width: 85%;
padding-top: 3em;
padding-bottom: 3em;
background-color: silver;
border-radius: #border-radius-large * 6;
}
.vcenter {
display: inline-block;
vertical-alignment: middle;
float: none;
}
I'm happy about every answer. Thanks for spending time on this.
.container {
max-width: 85%;
padding-top: 0;
background-color: silver;
border-radius: #border-radius-large * 6;
}
.vcenter {
display: flex;
align-items: center;
height:10em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container center-block" > <!-- Container -->
<div class="row"> <!-- Bootstrap Row -->
<div class="col-xs-4">
<img src="img/logo.png" alt="logo" class="img-responsive">
</div>
<div class="col-xs-offset-1 col-xs-7 vcenter">
<p>Textblock ... </p>
</div>
</div>
</div>
You should try flex. Check out this link:
https://jsbin.com/pezesaquza/edit?html,css,output