Sample code
<div class="container">
<div class="row" style=" display: flex;">
<div style="width: 200px; height: 50px; background-color: #847"></div>
<div class="container" style=" height: 50px; background-color: #147">
<div class="row" style=" height: 20px; background-color: #997">
<div class="col-xs-3 col-md-6 col-lg-2 " style=" height: 10px; background-color: #927"></div>
<div class="col-xs-3 col-md-6 col-lg-6" style=" height: 10px; background-color: #947"></div>
</div>
</div>
</div>
</div>
I need:
12 indented cells in the child rows(seems it works)
at the same time, have cell width in px for right cell (flex saves me, but i see some error when i reduce browser width until the end, in safari)
http://codepen.io/anon/pen/zKXaoV
Help please, maybe it is not good solution and exists better one or how to fix? Thanks
Related
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.
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 have two bootstrap columns, side by side, but when I add a margin to separate them then the columns stack on top of each other. I am using the Mixed: mobile, tablet, and desktop grid template for my two columns, and I'm not sure whether this is the cause.
#antGame { // container
height: 60%;
position: relative;
background-color: #fff;
border: 1px solid grey;
padding: 0 !important;
}
#stimuliContainer {
height: 40%;
}
#stimuli {
width: 100%;
max-height: 100%;
}
#errorMsg {
height: 20%;
width: 100%;
}
#antInstruct {
height: 60%;
background-color: #fff;
border: 1px solid grey;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8" id="antGame">
<div id="stimuliContainer">
<img id="stimuli" src="images/ant/cues/blank.png">
</div>
<div class="col-xs-12 col-sm-6 col-lg-8" id="errorMsg">
<span>Error Message</span>
</div>
</div>
<div class="col-xs-6 col-lg-4" id="antInstruct">
<h4>Instructions</h4>
<span>Hi</span>
</div>
</div>
</div>
I don't recommend to override the padding of the Bootstrap columns, because it can break the responsive, but you know, sometimes you are forced to do it.
In that case the most clean way you can do, is add a custom class .padding-2, that overrides the Boostrap padding but don't destroy the responsive.
HTML
<div class="container">
<div class="row">
<div class="col-xs-6 padding-2 ">
<div style="border: 1px black solid; background-color: red;">
1 col
</div>
</div>
<div class="col-xs-6 padding-2 ">
<div style="border: 1px black solid; background-color: blue;">
2 col
</div>
</div>
</div>
</div>
CSS
.padding-2 {
padding-left: 2px;
padding-right: 2px;
}
Demo: http://www.bootply.com/eO033QYCn3
Try to use padding instead of margin, and then, if you want to have for example border, you can add another element inside this one with padding.
Here's an example:
<div class="container">
<div class="col-xs-6" style="padding: 5px">
<div style="border: 1px black solid;">
1 col
</div>
</div>
<div class="col-xs-6" style="padding: 5px">
<div style="border: 1px black solid;">
2 col
</div>
</div>
</div>
And demo:
https://plnkr.co/edit/5fCMTJMJWPALk3W45t1i?p=preview
I have tried different ways to align contents inside div :
1) table and table cell but it acts weirdly with width
2) I have padding which wont align properly with for every content because data differ.
Note : My actual code is inside ng-repeat
HTMl :
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="offer-horizontal col-sm-6 col-md-6">
<div class="col-sm-6 col-md-6 offer-logo-div-horizontal" >
<img src="https://icon.uiowa.edu/help/wp-content/uploads/2014/07/ICON_logo_only.png" alt="nothing" style="height:20px;width:50px;" class="offer-logo-horizontal">
</div>
<div class="col-sm-6 col-md-6">
<span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
<p>Some really large label that will wrap to multiple lines in small screens</p>
<div>
<button>
shop now
</button>
</div>
</div>
</div>
<div class="offer-horizontal col-sm-6 col-md-6 ">
<div class="col-sm-6 col-md-6 offer-logo-div-horizontal" style="text-align:center;">
<img src="http://www.iconplc.com/icon-files/images/image-bank-component/other/icon-logo.jpg" style="height:20px;width:50px;" class="offer-logo-horizontal">
</div>
<div class="col-sm-6 col-md-6">
<span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
<p>Some really large label that wil</p>
<div>
<button>
shop now
</button>
</div>
</div>
</div>
<div class="offer-horizontal col-sm-6 col-md-6">
<div class="col-sm-6 col-md-6 offer-logo-div-horizontal" style="text-align:center;">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Icons_logo_normal.jpg" alt="nothing" style="height:20px;width:50px;" class="offer-logo-horizontal">
</div>
<div class="col-sm-6 col-md-6">
<span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
<p>Some really large </p>
<div>
<button>
shop now
</button>
</div>
</div>
</div>
</div>
</div>
</div>
CSS :
.offer-horizontal {
min-height: 194px;
background-color: #EEF0F1;
border: 5px solid #fff;
text-align:center;
}
.offer-logo-div-horizontal {
min-height: 194px;
text-align: center;
}
.offer-logo-horizontal {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
JSFiddle
My Question : How content I make data inside div vertically align.
Any help is appreciated.
Depending on your browser support, flexbox will achieve this:
Browser support: http://caniuse.com/#feat=flexbox
JSFiddle:
http://jsfiddle.net/22xvnjd5/4/
I've added the following rules to your code:
.offer-horizontal {
padding-bottom:20px; /* Tidy up the spacing on smaller screens */
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
}
Not necessary for alignment, but I also adjusted the image min-height as it caused a massive gap on smaller screens!
.offer-logo-div-horizontal {
min-height: 90px;
}
#media (min-width: 768px) {
.offer-horizontal {
min-height:194px;
}
}
I trying to make uncommon layout with bootstrap, but pulls and pushes works in wierd way. Look at it:
http://jsfiddle.net/tfgdveop/1/
<div class="container" style="background: white">
<div class="row">
<div class="col-xs-3" style="background: red; height: 300px;">catalog</div>
<div class="col-xs-9" style="background: blue; height: 50px;">bNNER</div>
<div class="col-xs-3 col-xs-push-6" style="background: yellow; height: 500px;">News</div>
<div class="col-xs-6 col-xs-pull-3" style="background: green; height: 280px;">Catalog</div>
<div class="col-xs-6 col-xs-pull-6" style="background: pink; height: 100px;">Promo</div>
</div>
</div>
I need pink promo block 9 cols width, but if i made it wider 6, it fall under news block.
I changed order a bit and Yellow News to float to right. I also removed all unnnecessary pulls and pushes. Here is the result:
http://jsfiddle.net/tfgdveop/3/
<div class="container" style="background: white">
<div class="row">
<div class="col-xs-3" style="background: red; height: 300px;">catalog</div>
<div class="col-xs-9"style="background: blue; height: 50px;">bNNER</div>
<div class="col-xs-6"style="background: green; height: 280px;">Catalog</div>
<div class="col-xs-3 pull-right"style="background: yellow; height: 500px;">News</div>
<div class="col-xs-9" style="background: pink; height: 100px;">Promo</div>
</div>
</div>
Is this what you are looking for?