bootstrap d-flex layout in mobile not working - html

I have three divs nested inside a parent div that look something like this:
.button-class {
margin-top: 0.5rem;
margin-right: 0.5rem;
margin-left: 45rem;
}
.svg-class {
margin-top: 1rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="d-flex mb-3">
<div class="mr-auto p-2">
<h2>text</h2>
</div>
<div class="button-class p-2">
<ion-button></ion-button>
</div>
<div class="svg-class p-2">
<svg></svg> //code
</div>
</div>
where I have used mr-auto to align the first element to the extreme left, and the other two elements are supposed to go towards the left (but not extreme left) with a certain margin difference.
So, currently what my problem is that I want to show this in the following way. There is a text to the left, and a button and an info symbol svg to the right. And for mobile I want to the text and the button + svg group to go into a columnar style so to speak. So the button extends a bit until it takes almost 80% of the space of the column with the info symbol at the end.
For larger screens it appears fine, but when I do mobile settings, like either using a mobile version of d-flex or adding a line break after the text and before the button (which is visible only in mobile), it ceases to function, and appears as three elements side by side in mobile. For example, I changed d-flex to d-md-flex and got the button and the info-symbol inside a single div (to make them move into separate columns as a group), but then what happens is that in both mobile and larger screens the text and the button appear in one col, and the info-symbol moves to the next. Could anyone please help with this even if its with default CSS? I have tried a variety of different bootstrap classes and they do not work. Really struggling to figure out how best to do this in a way that fits both for larger screens and for smaller ones.
EDIT:
I have tried changing this to default CSS flex where I make the parent container a flex-box and then for the two child elements (one containing the text and the other the button and the svg) I give them flex-grow of 2 and 1 respectively, and then do a flex-direction: row in larger screens and flex-direction: col in smaller screens. It does work, but for some reason one problem with that is that I am unable to style the SVG element on its own, for example if I want to push it down by giving it a margin-top, it has sort of become an svg styling problem now.

I basically just made what you had sketched up. I exchanged some markup for demonstration purposes, but these classes will work for you.
Essentially, Bootstrap doesn't have xs classes specifications in this version of Bootstrap. However, you can use flex-sm-row and flex-column classes for responsiveness. You could use flex-sm-row to keep the row horizontal on sm and up, then flex-column to stack vertically on xs screen widths (<576px).
I also added text-center or text-align: center; on your h2 so that it is centered on a mobile device. I also changed your markup a bit. Re-size the browser below 576 pixels to see the mobile view. See the CSS and HTML changes below:
img {
width: 30px;
height: 30px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="d-flex flex-sm-row flex-column justify-content-between">
<div class="wrapper">
<h2 class="text-center">text</h2>
</div>
<div class="d-flex mr-2 justify-content-center align-items-center">
<div class="button-class">
<button class="mr-3">Button</button>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/%3Fuestionmark_encircled.svg/1280px-%3Fuestionmark_encircled.svg.png">
</div>
</div>

Add this inside head tag.
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</head>
This will work for mobile.

Related

How to remove gaps around div with image?

one take col-md-4, second col-md-8, but the second with a picture is not 100% width, there are gaps on the left and right sides, could anyone please advise how to remove gaps and make image full size ? Thanks. Here is screenshot
.upperDiv{
height: 100px;
width: 100%;
background: red;
margin-top: 20px;
margin-bottom: 20px;
}
.fixed-content {
width: 100%;
height: 100px;
object-fit: cover;
}
<div class="container">
<div class="row upperDiv">
<div class="col-md-4" style="background: #005AA1;">
</div>
<div class="col-md-8">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Bootstrap put that padding for you to better align your content, you can remove it by inserting p-0 (padding = 0px) class name as I remember
<div class="container">
<div class="row upperDiv">
<div class="col-md-4 p-0" style="background: #005AA1;">
</div>
<div class="col-md-8 p-0">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Looking at your HTML, you are using bootstrap's grid system (hinted by the col-md-X classes). The gap you see in your example is caused by the padding applied to the cells of the grid system to create the gutter.
You have two possibilities:
You put the picture as a background instead, since padding is part of the element, the picture will cover this space too.
You remove the gutter.
1 is pretty self explanatory so I'll go straight to two. You can read about the .no-gutter helper class. It needs to be applied to a row and will effectively remove all gutters for the columns in it. But that means you'll loose the gutter on your left column too. You could also remove the padding with a custom class that sets padding-left:0 !important;padding-right:0 !important; This will effectively remove the gutter for the specified column element.
Whatever the option you choose, remember that cols are not meant to be used directly for the styling. They are here to help you create columns in which to put your visual elements. Although I pointed 3 different approaches to your problem, the only "pure" solution is to use the .no-gutter. Others might have weird visual impacts such as making the gutter effectively only half wide (since the left col participates in half the gutter too) and will not look right if there are other columns near it.

Bootstrap push and pull columns gives unexpected behavior for mid and large screen size

My Goal is to view bootstrap page on mid to large screen as col-screen-8 (screen-lg-md,sm,xs) as image to left. col-screen-4 as form to right in single row and on next row col-screen-12 as content at center eg. Banking.For mobile view or small screens I want to view Image at top -> Banking at middle -> Form as bottom in mobile view vertically.I am able to achive the mobile view as expected and see result by shrinking window. push pull demo.When it comes to mid or big screen it is not working as expected.When i played using push-pull bootstrap classes they are just moving left to right.
What is happening:
When i increase screen size Image column is getting bigger and Form and Banking remain at bottom
What is expected:
When i increase screen size Image should move to left side with size col-screen-8 as Image, Form col-screen-4 at right and content Banking col-screen-12 as Banking to the next row at bottom. Mobile view must not affected.
Thanks.
As far as I make of it, .col-XX-pull-N and .col-XX-push-N classes only
add left and right negative margins, which means you can only use them to offset columns left and right on the same .row. You can't push a column on the next row. You're only pushing it outside the layout. It won't magically wrap.
You should add a class to your special row and use flexbox's order property to re-order columns at desired widths:
.reorder-md {
display: flex;
flex-wrap: wrap;
}
#media (min-width: 992px) {
.reorder-md-last {
order: 2;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row reorder-md">
<div class="col-xs-12 col-md-8">
<div class="alert alert-danger">Image</div>
</div>
<div class="col-xs-12 reorder-md-last">
<div class="alert alert-info text-center">Banking</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="alert alert-success">Form</div>
</div>
</div>
</div>
Please note .reorder-md and .reorder-md-last are custom classes I added. So don't expect .reorder-lg to work in Bootstrap. You need to add the CSS for reordering yourself, as well as match Bootstrap's responsive breakpoints.

Bootstrap row and column class will cancel each other?

<div>
<div class="row">
<div class="col-xs-12">
Is it true that 'row' and 'col-xs-12' will cancel each other?
If above answer is yes, why I can see we use row and col class in Bootstrap official website (https://v4-alpha.getbootstrap.com/layout/grid/)?
If above answer is yes, Why?
Any reference document I can read about?
Updates: 'Cancel' means they have opposite effect.
In a sense, yes, they cancel each other out, meaning that the padding added by the parent of a .row will be eliminated with the negative margins of .row.
Let's take a look at even one of the examples from the Bootstrap 4 documentation, with some additional CSS:
/* Warning! It is generally a bad idea to style the Bootstrap elements such as .col and .row, but this is done only for the purpose of demo. */
.col {
background-color: lightgray;
border: 1px solid darkgray;
}
.row {
background-color: lightblue;
}
.container {
background-color: lightgreen;
padding-left: 30px !important;
padding-right: 30px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
1 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
<div class="col">
1 of 3
</div>
</div>
</div>
Let's consider why the effect of cancelling happens: By default, Bootstrap 4 is styling the container and column classes with a padding of 15px on each side (X axis), and the row class with a negative margin of 15px. The effect of negative margins is the opposite of padding, adding to the size of element instead of shrinking it.
Therefore, the effect of having 15px side-spacing from .container, minus 15px from .row, and finally 15px from the columns, will result in a neat way of spacing the elements centrally on the page. This effect cannot be seen in the first example, as the background styling is applied directly to the column. For observing this effect, we can add markup into the columns so that the column spacing can be observed:
/* Warning! It is generally a bad idea to style the Bootstrap elements such as .col and .row, but this is done only for the purpose of demo. */
.col {
background-color: lightgray;
border: 1px solid darkgray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<div class="bg-info px-2">
<span>Gray color is</span>
</div>
</div>
<div class="col">
<div class="bg-warning px-2">
<span>the actual spacing.</span>
</div>
</div>
</div>
</div>
Without having that spacing on the columns will make the elements inside the columns stick to the edges of the page, which is not generally desirable. By omitting the negative margin on the .row, on the other hand, will potentially result into excessive spacing for the columns, so less content will fit in – this is also why it is very important to have proper markup for the Bootstrap Grid System, as otherwise its use will result in undesirable results.
Useful links for learning more:
Bootstrap 4 Grid System (the one you have even mentioned)
The Definitive Guide to Using Negative Margins (Smashing Magazine)
Padding (CSS-Tricks) – also look into box-sizing rule
So I have no idea in what sense do you mean "cancel" out. The only thing that cancels out is the row negative margin on the sides with the padding of the columns. This allows the spacing between the columns without having it on the outer sides.
To get a sense what the grid system provides there is a nice article about it even though it's a little bit old:
https://webdesign.tutsplus.com/articles/all-about-grid-systems--webdesign-14471
There are many other. Also on bootstrap.
No, it's not true, the col class is used inside a row class.
The row class defines the space that will be used together but the col class defines the spatial arrangement in that row.

Bootstrap Printing and Column Resizing

I have done some digging on SO and have found a a variety of resources regarding printing and bootstrap.css, but I have not seen a solution to this particular problem.
Lets say I have a setup like seen in this Plnkr: http://plnkr.co/edit/7ETXQyEvY7S16JTU9wYB?p=preview
and HTML like this:
<div class="col-xs-6 red">
testing
</div>
<div class="col-xs-6 blue hidden">
123
</div>
The CSS states that during printing the column will be hidden (on my real page the stle is not hidden but hidden-print), which is expected, but is there anyway to now have the col-xs-6 red now take up the empty space left by the hidden blue column.
I know you could override the style col-xs-6 to be width:100%, but that would affect other columns on the page that need to be left at width: 50%.
Has anyone had this problem before, if so how did you address it?
For Bootstrap 4 you need to do a modification from #Lance's answer.
#media print {
.col-print-12 {
max-width: 100%;
flex: 0 0 100%;
}
}
With the same HTML
<div class="col-xs-6 col-print-12 bg-danger">
Red Column is full width for print
</div>
<div class="col-xs-6 hidden-print bg-primary">
Blue Column is hidden for print
</div>
I suggest something like:
#media print {
.col-print-12{
width:100% !important;
}
}
Then your HTML can be:
<div class="col-xs-6 col-print-12 bg-danger">
Red Column is full width for print
</div>
<div class="col-xs-6 hidden-print bg-primary">
Blue Column is hidden for print
</div>
!important is needed to override the regular col widths since at least one set will also apply at print width.
I updated your plunk using xs as a proxy for the print view here to demonstrate the concept. One red column in mobile, Red and Blue columns in tablet or bigger.
Edit: if you want to do it with CSS only you would have to use the flex property. Take a look at this pen. Change display: flex to display: none on any column and see how they stretch to fit the available space (this renders bootstrap useless).
Create a div container inside the bootstrap column and apply visibility: hidden to it. You want to hide without removing it, meaning the browser will still show the space that the element occupies.
It's a good practice not to add your own classes to bootstrap columns but instead create a container inside it so you can apply your classes to.
display: none gets rid of the element entirely and affects the positioning of the other elements that were around it.

Bootstrap col to overflow with scroll instead of stacking on each other

I'm currently using Bootstrap to handle my grid layout. One thing I'm trying to do is keep the integrity of the layout of the columns instead of having it stack in a responsive way when the screen resolution is reduced.
An example of the behavior that I want can be seen here: http://demos.telerik.com/kendo-ui/grid/index
If you reduce the screen horizontally, you can see that at some point, the content area is pushed off the screen, allowing you to scroll to see the overflow content. I would like this behavior using Bootstraps col and rows.
Here is a JSFiddle: https://jsfiddle.net/jntpme3f/
If you reduce the screen horizontally, you can see that the columns get stacked because of the min-width that has been applied to it. I need these columns to have a min-width but I also need them to stay in the same row layout that they're in originally. How do I got about to achieving this?
HTML
<div class="row-fluid">
<div class="col-sm-3 box"></div>
<div class="col-sm-3 box"></div>
<div class="col-sm-3 box"></div>
<div class="col-sm-3 box"></div>
</div>
CSS
.box {
height: 300px;
border: 1px solid grey;
min-width: 275px;
}
If you want the columns to remain in a row on mobile too, you will have to remove the responsive layout from your bootstrap site. Remove this line from your <head> tag: <meta name="viewport" content="width=device-width, initial-scale=1">