I'm trying to use Bootstrap, and having an issue that in medium resolution two columns that should be side-by-side, are displaying underneath each other, see screenshot http://dynanetics.com/problem-screenshot.png, the code is at http://dynanetics.com
At higher resolutions (large and xlarge) this works correctly. Why is this happening at medium resolution?
Any help would be appreciated, thanks.
The relevant code is below:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-3 d-block float-left">
<img src="logo-sitesmall.png" class="d-block float-none">
</div>
<div class="col-md-6 d-block float-left text-center">
<h1 class="brandname">Test site name</h1>
</div>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
I think your div="col-md-4", after first row div is too small for both the content to be on same line in medium resolution, try to increase it.
Related
On my widescreen monitor, my cover page looks like this (which is how I want it to look):
But on my smaller screen laptop, the words and the buttons (which are each in two separate columns) get spread out and my cover page looks like this:
I've tried several things but I can't seem to get them to stick together on smaller screens. Here is the relevant HTML code:
HTML:
<div class="container h-100">
<div class="row d-flex h-100 justify-content-center align-items-center g-0">
<div class="col-sm-6">
<div class="row">
<h1 class="title">transfer your</h1>
</div>
<div class="row">
<h1 class="title">music</h1>
</div>
<div class="row">
<h2 class="subtitle">between Spotify & YouTube</h2>
</div>
</div>
<div class="col-sm-4">
<div class="row mb-3">
<a class="btn" id="sp-to-yt" href="#" role="button">
</a>
</div>
<div class="row">
<a class="btn" id="yt-to-sp" href="#" role="button">
</a>
</div>
</div>
</div>
</div>
It's based on a percentage width. You can use the responsive classes to manage each screen size.
For small screens use <div class="col-sm-6"></div> which will display half-width on small screens. You can use multiple responsive classes like so...
<div class="col-sm-6 col-md-8 col-lg-3 col-xl-4"></div>
The responsive elements can be remembered as sm = small, md = medium, lg = large, etc, and will control each breakpoints div widths. Remember the max number of columns by default is 12.
Also, in your row.. <div class="row d-flex h-100 justify-content-center align-items-center g-0"> you don't need to define the display flex as .row is already a display flex class.
I wanted three images in each row...
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/2103864/pexels-photo-2103864.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1476321/pexels-photo-1476321.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
I expected it to be inside the border and all the images should have been of same size (three in each row) ...But its not.. help...
You have <div class="thumbnail">, but the built-in bootstrap 3 thumbnail classname is <div class="img-thumbnail">.
You say you want all images to be the same size, but your images have different proportions. Their pixel sizes are: 500x333, 500x750, and 500x375. What behavior do you want exactly? You could force them to all be the same height and width by setting adding styles for height=500px; width=500px;, but then the images will be distorted and squashed.
What you'll want to do is remove &w=500 from the image URLs so they scale to the dynamic width of the Bootstrap grid, and maybe also change the class on the columns to col-md-4 or col-sm-4 to make sure the images sit next to each other on smaller screens.
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/2103864/pexels-photo-2103864.jpeg?auto=compress&cs=tinysrgb&dpr=1">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://images.pexels.com/photos/1476321/pexels-photo-1476321.jpeg?auto=compress&cs=tinysrgb&dpr=1">
</div>
</div>
</div>
If you want all three images to have the same height as well, you could do something like this:
.thumbnail img {
max-height: 300px;
}
To achieve true dynamic uniformity, you should look at using Bootstrap 4 card groups instead.
I am trying to lay 4 elements in a row with a custom horizontal gutter, I tried to put each element in a col with the class of col-md-2 for a certain screen size, and modify the margin-right of each element to my need.. but it didn't look very good, when applying the col-md-3 obviously there is no room for adding a margin to each element, surprisingly when I tried applying col-md-2.5 class, it worked on big screens, however, when I want to have the element span to 10 cols in the smaller screens, it does, but when i go back to the bigger screen, it behaves like the small screen again, Here is my HTML code and i will leave a screenshot down below to illustrate the behavior that I want.
[class^="col"]:not(:last-child){
margin-right: 60px;
}
<div class="container">
<div class="row">
<div class="col col-md-2.5">1</div>
<div class="col col-md-2.5">2</div>
<div class="col col-md-2.5">3</div>
<div class="col col-md-2.5">4</div>
</div>
</div>
<!--I know it may look weird but this above HTML along with the CSS
achieved my goal on the big screens -->
<!-- things get messy again when i do the following to adjust the
view of elements on smaller screens -->
<div class="container">
<div class="row">
<div class="col-10 offset-1 col-md-2.5">1</div>
<div class="col-10 offset-1 col-md-2.5">2</div>
<div class="col-10 offset-1 col-md-2.5">3</div>
<div class="col-10 offset-1 col-md-2.5">4</div>
</div>
</div>
<!-- it works fine in small screen, but when I back to big
screens with this set up, it doesn't give me the initial
behavior and spans every element to columns !!
Here is the screenshot of the desired behavior
thanks in advance!
I don't quite get your problem. Have you just tried simply applying paddings to the left and right of your 4 columns using {property}{sides}-{breakpoint}-{size} notation?
https://getbootstrap.com/docs/4.1/utilities/spacing/#notation
That way you don't have to use offset on your columns. Instead, you can just use col.
For example, if you only want big left and right paddings on large scrren, you can apply px-lg-5 on col class.
<div class="container">
<div class="row">
<div class="col px-lg-5">
...
</div>
<div class="col px-lg-5">
...
</div>
<div class="col px-lg-5">
...
</div>
<div class="col px-lg-5">
...
</div>
</div>
</div>
jsfiddle: http://jsfiddle.net/aq9Laaew/241204/
You're missing your target screen:
<div class="container">
<div class="row">
<div class="col-10 offset-1 col-md-2.5">1</div>
<div class="col-10 offset-1 col-md-2.5">2</div>
<div class="col-10 offset-1 col-md-2.5">3</div>
<div class="col-10 offset-1 col-md-2.5">4</div>
</div>
</div>
Add whichever size you want: xs, sm, md, lg to the col and the offset like this:
<div class="container">
<div class="row">
<div class="col-10 col-sm-offset-1 col-md-2.5">1</div>
<div class="col-10 col-sm-offset-1 col-md-2.5">2</div>
<div class="col-10 col-sm-offset-1 col-md-2.5">3</div>
<div class="col-10 col-sm-offset-1 col-md-2.5">4</div>
</div>
</div>
Here's a reference:
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
EDIT: It looks like you may have to specify which screen you're targeting when using the offset class. But, you're correct about not needing the other option.
I'm struggling with making the image on the right stretch to full width in a moment when you'll make the screen size smaller so it transitions to mobile view.
Is there any other class in bootstrap that would do similar work that "img-fluid" does but display image full width when it goes below the text in bootstrap grid system?
<div class="row">
<div class="col-md-6 d-flex">
<div class="align-self-center">
<p class="lead font-weight-bold">sometext</p>
</div>
</div>
<div class="col-sm-6">
<img class="img-fluid" src="someimage.jpg">
</div>
</div>
Here is my fiddle: http://jsfiddle.net/x1hphsvb/2220/
To see what I mean simply lower the width of display window. Image goes below the text and fills only half of the div when I want it to fill it fully and behave as it does right now before the transition.
Both the columns should have the same breakpoint (ie; md/sm) so that they become full-width at the same time...
<div class="row">
<div class="col-md-6 d-flex">
<div class="align-self-center">
<p class="lead font-weight-bold">sometext</p>
</div>
</div>
<div class="col-md-6">
<img class="img-fluid" src="someimage.jpg">
</div>
</div>
http://jsfiddle.net/dwnu5zjq/
i have a problem with my website: screenshot.
How do I make what I circled be in the middle, parallel with the navbar?
This is my code :
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 text-center">
<div class="thumbnail">
<img src="" alt="">
<div class="caption">
<h4>label</h4>
<p>adadasdasd</p>
add to chart
</div>
</div>
</div>
</div>
</div>
I would recommend using the .col-md-offset-* class. So in your case when it has a width of 4 units, offset it 4 units with col-md-offset-4 so that it will have 4 units on each side and be centered.
First, maybe you can read this:
http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
With the grid basic, you know col-12 is the whole width.
If you want to make it in the middle try this:
(This might not be the best code here, but should work).
<div class="col-md-4"></div>
<div class="col-md-4">
<YOUR BOX GO HERE>
</div>
<div class="col-md-4"></div>
Let me know if it was helpful.
Thanks