Bootstrap boxes not fitting - html

I have a problem with my Boxes onces i resize my webpage (browser) i am not sure how to use it, i use "col-sm-3"
<div class="col-md-12">
<div class="w-section inverse">
<h3 class="section-title">User's Outfits</h3>
<div class="row">
<div class="col-md-3">
<div class="box">
<div id="boxpic">
<img src="http://apinchofglitzandglam.files.wordpress.com/2014/03/dsc_0653.jpg?w=560&h=822" />
</div>
<div id="title" style="text-align:center;">Winter's Mist</div>
<p style="font-family:comic sans MS;width:250px;height:30px;"></p>
</div>
</div>
<div class="col-md-3">
<div class="box">
<div id="boxpic">
<img src="http://apinchofglitzandglam.files.wordpress.com/2014/03/dsc_0653.jpg?w=560&h=822" />
</div>
<div id="title" style="text-align:center;">Winter's Mist</div>
<p style="font-family:comic sans MS;width:250px;height:30px;"></p>
</div>
</div>
<div class="col-md-3">
<div class="box">
<div id="boxpic">
<img src="http://apinchofglitzandglam.files.wordpress.com/2014/03/dsc_0653.jpg?w=560&h=822" />
</div>
<div id="title" style="text-align:center;">Winter's Mist</div>
<p style="font-family:comic sans MS;width:250px;height:30px;"></p>
</div>
</div>
</div>
</div>
</div>
Here are the images -> http://justpaste.it/STacKovErFloW

It looks like your image is not resizing.
use this in your css style
.boxpic img {
width:100%;
height:auto;
}

Add the following class to your images:
img-responsive
An example is below:
DEMO JSFiddle
Also, BootStrap works from a bottom-up sense... meaning, if you declare the columns to be medium, then both medium and large columns will stay consistent with what you declared, i.e:
col-md-3 therefore implies col-lg-3
Whereas if you declare an extra small column size then that stays consistent with every column possible, i.e:
col-xs-3 therefore implies col-sm-3, col-md-3, and col-lg-3
So if you want something on your webpage to stay consistent for all devices, then you can declare the smallest column size (xs) and have that take care of all small, medium, and large screen sizes. An example of this is below:
DEMO JSFiddle

Related

Keep row of images at same height

I am working on a Bootstrap 3 grid (unfortunately, the CMS is not allowing me to use Bootstrap 4). At the moment I cannot link to the page, so maybe this question is too hard to answer.
Here is how the row containing 5 columns is looking in the CMS:
The max-width is 1200px.
The problem is that every time I add a column containing an image, the image height is not the same. In this example I set a height on 255px on all images, but the image in the first column is much taller than the others.
When I enter the code in a JSfiddle it is looking normal
See jsfiddle here
So it must be something in the CMS there is doing it? Is there some kind of clue what I could look after?
Best regards
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.padding-y {
padding: 20px;
background-color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="section padding-y">
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
</div>
</div>
Step 1. Let's reproduce the problem
We don't need the bootstrap-theme.min.css. This file uses for the decoration only. First of all wee need bootstrap.min.css.
The 3.0.0 version is too old. Let'use the 3.4.1. instead. It's the latest Bootstrap 3 version.
Bootstrap assumes the row is inside the container. Sometimes the CMS has its own containers, and then you can get by with them, but to reproduce the problem, we need the correct code with the container.
Looking at your screenshot, I dare to assume that something on your site adds the max-width: 100%; restriction to all images. This is a fairly common solution for different themes.
I removed the block with the section padding-y classes, because the problem was reproduced without it.
So we get an example of a code that reproduces your screenshot.
img {
max-width: 100%;
}
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="https://via.placeholder.com/348x255/69c/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Step 2. What's happened
4 small images are wider than their columns. With a total content width of 1200 pixels, a column in one sixth of the width is 200 pixels. In addition, each column also has a horizontal padding of 15 pixels. There are 170 pixels left for the 233-pixel wide image.
And something adds a limit for the maximum width of images. Because of this, these images become smaller and their height becomes smaller too.
Step 3. What can be done
Since we do not know your layouts for screens of different widths, I can only fantasize.
Suppose you want to put 5 pictures of different sizes in one line on the desktop so that their heights coincide.
Variant with backgrounds
For example you can replace the images with blocks and use the images as a background. Then the height can be set in the CSS, the gaps between the pictures will be the same, but the visible part of the pictures can decrease.
.image-box {
background-repeat: no-repeat;
height: 255px;
}
#media (min-width: 768px) {
.image-box {
background-position: center;
background-size: cover;
}
}
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="image-box" style="background-image:url(https://via.placeholder.com/348x255/69c/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Variant with flexbox
You can also make Bootstrap 3 columns behave like a flexbox. This solution is suitable if the sizes of the images are known in advance and you can calculate which part of the row each of them occupies.
In the comments you have wrote that you wish to stretch the images on mobile. So I use this info in the new solution.
.row-of-images img {
width: 100%;
}
#media (min-width: 768px) {
.row-of-images {
display: flex;
}
.row-of-images > div {
box-sizing: content-box;
/* images will be resized taking into account the padding of the columns */
flex: 1 1 18.203125%;
/* 18.203125% = 100% * 255px / (348px + 4 * 255px) */
}
.row-of-images > div:first-child {
flex-basis: 27.1875%;
/* 27.1875% = 100% * 348px / (348px + 4 * 255px) */
}
}
<div class="container">
<div class="row row-of-images">
<div class="col-xs-12">
<img src="https://via.placeholder.com/348x255/69c/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
The reason the images are different heights on the problem page "(domain) dot com slash da-dk/page/sbp" (but not in the posted source above) is because the images on the problem page have the .img-responsive class:
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
</div>
From the Bootstrap 3.3 documentation, .img-responsive applies:
max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
The first image is scaling to the width of the first column, which is col-sm-4. The other images are scaling to the width of a col-sm-2 column. So it's clear why the images are different height.
The simplest fix is to remove .img-responsive from all the images.
But if you want to keep the images responsive, you'll need to adjust the image aspect ratios so the wider and narrow images end up the same height.
Example with the aspect ratios adjusted:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
</div>

Boostrap mix with grid to equal height of row inside .col

I want to set my code to auto-calculate equal height in inside of .col, because for example inside .col I have <h2> and <p> which could have different number of rows, so height of this element will be different for every .col, I would like to get same height for all rows inside .col.
I tried to use flexbox utilities, but I didn't find a solution, so I am wondering if grid will help me get what I want to get, but I don't know if display: grid inherits height of flexbox elements?
Here is my code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Projektowanie <b>stron</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/projektowanie-stron.jpg" class="img-fluid" alt="Projektowanie stron">
</div>
<p>Projektowanie oraz tworzenie serwisów internetowych.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Pozycjonowanie <b>stron</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/pozycjonowanie-stron.jpg" class="img-fluid" alt="Pozycjonowanie stron">
</div>
<p>Zwiększ pozycję swojej strony www w wynikach wyszukiwania.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Outsourcing <b>IT</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/outsourcing-it.jpg" class="img-fluid" alt="Outsourcing IT">
</div>
<p>Outsourcing informatyczny Profesjonalna opieka informatyczna dla firm.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/jRweow
I thought about using display: grid to .header-bottom-box and equal height of inside element.
EDIT
I tried to use GIRD:
And it works like I want to, but I don't know why I get this white space, how to delete it?
this is normal sir,
this all happen because of last col. text is less then first and second.

Bootstrap spacing between columns in a row

I am struggling adding spacing (or margin) between columns using the grid system in bootstrap. My html and css is below. I could not get any of the solutions posted online to work. The goal is spacing between col-8 and col-4. Any suggestions? Thanks!
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
hello
</div>
<div class="col-md-4">
<div class="row" align="center">
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/github_circle_black-128.png" class="icon-resize" alt="github">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_black-128.png" class="icon-resize" alt="linkedin">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_black-128.png" class="icon-resize" alt="twitter">
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
max-width: 960px;
height: 100%;
}
here is what you're looking for:
gridGutterWidth
It's usual to download the raw (.scss or .less) versions of bootstrap, so you can control the css output at build time. If you don't use any of them, you may find the http://getbootstrap.com/customize/ comfortable.
You could apply inline by
<div class="col-md-4" style="padding-left:1em">

Grid is flying around on the responsive part

I am struggling a lot with the responsive part of a page.
When I scale down to around 991 px, the book, and the headline text is flying around. Originally I used sm-hidden and sm-visible, because I would like that the text headline came first, and afterwords the picture of the book.
But how can I solve this? I am starting to run low on ideas how to make it fit, so the book is not going under the background picture when I reach around the 991 px. I would like that the headline and book img stayed inside the background picture.
I hope somebody can through the developer console see what is wrong here. My code until now looks like this:
<div class="background-image" #Html.Raw(topImageStyling)>
<div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 img logo img-responsive">
<img src="https://www.site.dk/img/inovo-logo-white-small.png">
</div>
</div>
</div>
<div class="book container col-sm-12 hidden-sm hidden-xs col-md-3 col-lg-4">
<img src="https://www.site.dk/img/landingpages/.png">
</div>
<div class="container col-sm-12 col-md-9 col-lg-8">
#if (!string.IsNullOrEmpty(headerText))
{
if (pageAlias == "Blog")
{
<h1 class="header-xl center">
#Html.Raw(headerText)
</h1>
}
else
{
<p class="header-xl">
#Html.Raw(headerText)
</p>
}
}
#if (CurrentPage.HasValue("imageTeaserText"))
{
<p class="sub-header center">
#Html.Raw(CurrentPage.imageTeaserText)
</p>
}
</div>
<div class="col-sm-12 visible-sm visible-xs">
<img src="https://www.site.dk/img/landingpages/g.png">
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 main-content" id="main-content">
<div class="row">
<div class="col-lg-12">
#CurrentPage.GetGridHtml("site")
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So I think I might have found the solution to your problem. On line 3044 of your CSS, there is the img element. I simply added the following to your code:
img {
display: block;
max-width: 100%;
height: auto;
position: relative;
z-index: 1030;}
It works for screen sizes larger than the 960px range and acts up a little from the 760px-440px range. I figured all you have to do now is add a media query for the corresponding viewport widths. To explain the solution is simple. Within CSS all elements that are layered within the HTML document have a z-index that determines there position in the stack. From there, in order to get the z-index to respond, I set the position to relative for that img element. The z-index property only works when the position is set to something other than static which is the default value. I hope this helps! Let me know if you have any questions.

Bootstrap layout advice

I have found myself fumbling around with this odd layout that I need to design using Bootstrap.
Imagine the size of this is 660 x 330 wide, What I want to do is without any padding between anything is have an image on the left side that fills the black color 100%. The size of this will never change, on screens that it doesn't fit it will be using a different layout (so this will only really be on small+ screen sizes.
Here is what I originally was thinking, but since the image doesn't necessarily fit a column width, this will not work. Would it be best to create a container that is exactly 660x330 and then use rows/columns inside that? Or maybe I should step away from bootstrap in this case. Thanks in advance for any advice.
<div class="row">
<div class="col-xs-6">
<img src="../images/temp-featurelarge.jpg"/>
</div>
<div class="col-xs-6">
<div class="row">
</div>
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
</div>
</div>
</div>
Yes, you can create a div with specific Width and Height and then use columns to split. But here in your case I guess if you use "width: 50%" for the inner divs that would be fine and it's not necessary to use Bootstrap columns.
View my demo on jsfiddle
<div class="row">
<div class="col-xs-6">
<div class="left">
asdfdasf
</div>
</div>
<div class="col-xs-6 no_padding">
<div class="row">
<div class="col-xs-12 no_padding">
<div class="right_top">
asfjldfj
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 no_padding">
<div class="bottom_left">Dfdsaf</div>
</div>
<div class="col-xs-6 no_padding">
<div class="bottom_right">Dfdsaf</div>
</div>
</div>
</div>
Css=============>
body{
color:#FFF;
}
.left{
background:black;
height:300px;
}
.right_top{
background:red;
height:150px;
}
.bottom_left{
background:pink;
height:150px;
}
.no_padding{
padding:0;
}
.bottom_right{
background:blue;
height:150px;
}