I'm having trouble figuring out how to get this correctly.
The situation:
I have a div (header of a card) which has an icon, a title and a span. This should be left aligned. The header can also have tags (spans) which should be right aligned (start from the right). This is easy to get using float right in the tags, the problem is that the order of the tags is wrong. I tried other things and got the order correctly, but if there are a lot of tags, and a second line is needed, it starts from the left, and it needs to start from the right.
Something like this:
Example
I'd recommend using something like bootstrap, so you can create your div in the specific order you want, and have it resize the divs according to screen size using the grid system.
https://getbootstrap.com/docs/4.0/layout/grid/
Here is a demo using a col that disappears on small screen sizes, but appears on larger ones... (4 different sizes (col-lg-12, col-md-12, col-sm-12, col-xs-12), and you can have elements resize according to screen width).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-md-9 col-sm-12 ml-auto" style="background-color:lavender;">Title</div>
<div class="col-md-3 col-sm-12 ml-auto" style="background-color:lavenderblush;">Div 1</div>
<div class="col-md-3 col-sm-0 ml-auto"></div>
<div class="col-md-3 col-sm-12 ml-auto" style="background-color:lavender;">Div 2</div>
<div class="col-md-3 col-sm-12 ml-auto" style="background-color:lavenderblush;">Div 3</div>
<div class="col-md-3 col-sm-12 ml-auto" style="background-color:lavender;">Div 4</div>
</div>
</div>
</body>
</html>
Related
I have HTML like:
<div class="container-fluid">
<div class="row">
<div class="col-9">
<div class="container">...</div>
</div>
<div class="col-3">
<div class="container">...</div>
</div>
</div>
</div>
I am trying to get it so that, once a certain threshold of viewport width is reached, the columns stacked. I thought this was achievable by specifying col-xs-12 col-sm-12 col-md-9 col-lg-9... for the first col and corresponding ones (3, 12, 12, ...) for the second.
This is not working however.
My head Bootstrap link is:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
Try to use col-12 col-md-9.
Bootstrap is "mobile first", so the above code means: by default this element is col-12 (full-width), then from medium up it will be 3/4 of the row element col-md-9.
I'm new to bootstrap, trying to align 2 divs vertical on responsive mode, but no luck so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div>
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
</div>
<div class="col-xs-12 col-sm-11">
<p>The estimated delivery date is provided to you as a guide only.</p>
</div>
</div>
</body>
On normal desktop mode, the divs are vertically aligned. But once I go to mobile mode, the second div is sitting below the first div. How can I make the 2nd div to sit next to the first div vertically?
Most of the boostrap over mobile devices tend to make things one below another because that is pretty much what bootstrap does in CSS/Div elements on mobile.
There are some solutions over it, but I see in your elements before
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
that you don't use the triple rule.
Using bootstrap col- elements should be always into container and row like this:
<div class="container"> <!-- Or container-fluid -->
<div class="row">
<div class="col-xs-12 col-sm-1">
most inner div
<div/>
<div/>
<div/>
A little harder as solution is to copy the whole Bootstrap grid css file into a new file you make and you modify the things you need the most, like the .col-lg xs or the flex and the max width
Last but not least, go check the #media element over here:
https://www.w3schools.com/css/css_rwd_intro.asp
This could help you understand the most of what I said before about auto-resizing over mobile devices and css elements
<!--Try this one, It's simple and responsive in all widths and are aligned vertically can also do this using css flex box but little bit lengthy.-->
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="col-md-12">
<div class="d-flex flex-column">
<img src=" https://i.ytimg.com/vi/hF_LjTUvP-U/maxresdefault.jpg" alt="firstImg" class="img-fluid" style="width: 150px;
height: 150px;">
<img src="https://wallpapercave.com/wp/wp2554641.jpg" alt="secondImg" class="img-fluid mt-2" style="width: 150px;
height: 150px;">
</div>
</div>
</div>
</body>
</html>
strong text
You wrote
<div class="col-xs-12 col-sm-1" >
The col-xs-12 means, that on small screens, this element should fill the complete container. Use
<div class="col-xs-6 col-sm-1" >
for both containers, or one col-xs-1 and the other col-xs-11.
There are 12 columns in bootstrap and you decide, how they are filled
I need a row that contains an image, an embedded video, and some text. The site uses Bootstrap for responsive behavior, however, the objects in this row should not stack when the width of the page is reduced.
With an image in the first column the embedded video in the second column has problems resizing when the width of the page is reduced. It appears that as the page width decreases and the row height becomes less than the height of the image in the first column the embedded video in the second column begins to display black bars above and below and loses its aspect ratio. This occurs even though the image itself does seem to be changing height (thus being "responsive"). But the real problem I'm trying to address is the problem with the embedded video in the second column that gets messed up when the page width is reduced (with an image in the first column).
My code is as follows:
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3 border">
<img class="img-fluid" src="https://via.placeholder.com/30x225" alt="image">
</div>
<div class="col-6 border embed-responsive embed-responsive-16by9" id="vid">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kyJUQuaECrg" allowfullscreen></iframe>
</div>
<div class="col-3 border d-flex">
<span class="mt-auto">Some Text</span>
</div>
</div>
</div>
</body>
</html>
The problem appears to center around the image in the first column. If I remove the image and place text in the column then the embedded video in the second column resizes properly at all window widths.
Although the "img-fluid" class added to the image in the first column appears to cause the image to have a responsive height the video in the second column gets messed up when the page width is shrunk. I've tried all sorts of height manipulations using percentages to both the image and the div/col containing the image, but so far I can't find a combination that addresses this issue.
Ultimately I would like to be able to specify a height for the image in the first column that is defined as a percentage of its container. I need the image to have a responsive height and the embedded video to scale but maintain its appearance (no black bars and correct aspect ratio) at all page widths.
BTW the image in the first column could be replaced with text that is rotated 90 degrees to the left. However, any attempt to rotate text within a Bootstrap column has caused a number of other alignment problems.
Well you can set the image's height to 100% wich will be the height of the column so that will be responsive.
I found that if I use Bootstrap's embed-responsive class for the first column (containing the image) and wrap the image in a <div> then the embedded video in the second column behaves properly.
For some reason this doesn't work with the anchor around the placeholder image I used in the code in my question above. So I've provided my updated code below with a reference to a local image.
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3 embed-responsive border">
<div class="embed-responsive-item justify-content-end d-flex ">
<img class="mt-auto" style="height: 100%;" src="img/local_image.jpg">
</div>
</div>
<div class="col-6 border embed-responsive embed-responsive-16by9" id="vid">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/kyJUQuaECrg" allowfullscreen></iframe>
</div>
<div class="col-3 border d-flex">
<span class="mt-auto">Some Text</span>
</div>
</div>
</div>
</body>
</html>
I want to create a html page with first row which has a sidebar menu and div for showing the KPI metrics. I would like to make this KPI metrics div fixed.
Below this KPI metrics is a div for tables. Now when the user scrolls through the table the KPI metrics div should always be fixed. I would also like to know how to align the KPI metrics div and the table div aligned on the right side. I have figured that I could add position : fixed for the KPI div. But not sure how to align the table div on the right side.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<p>KPI DIV TO BE FIXED</p>
<div class="row row-no-gutters">
<div class="col-sm-4" style="background-color:lavender;">SIDEBAR</div>
<div class="col-sm-8" style="background-color:lavenderblush;">KPI DIV</div>
</div>
<br>
<p>TABLE DIV BELOW KPI DIV</p>
<div class="row">
<div class=" offset-md-4 col-md-8" style="background-color:lavenderblush;">TABLE DIV</div>
</div>
</div>
</body>
</html>
Here's a start for you:
https://codepen.io/panchroma/pen/zXBVRp
I'm not clear where you need to go from here though. Let me know if you need more help.
The HTML is very close to what you posted, my only changes are on lines 21 and 23 where I modified the classes.
<div class="row row-no-gutters">
<div class=" col-md-offset-4 col-md-8" style="background-color:lavenderblush;">TABLE DIV</div>
Good luck!
I have 3 blocks of data. First one having grid size of 10, second also size of 10 and third having size of 2.Can i pull the third grid 20 times to make it the 1st grid?
At first its like
then i want the result like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.a{
background:blue;
}
.b{
background:red;
}
.c{
background:green;
}
</style>
</head>
<body>
<div class="row">
<div class="c col-xs-12 col-sm-10">Graph</div>
<div class="b col-xs-12 col-sm-10">Meters</div>
<div class="a col-xs-12 col-sm-2">Buttons</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
I want to put the buttons before graph in screen size greater than xs
You need to use two different set of buttons. One that will be placed before the graphs and will be visible only in larger that xs screens, and one the will be placed after the graphs and will only be visible in xs screens.
Example:
<div class="row">
<div class="a col-xs-12 col-sm-2 hidden-xs">Buttons</div>
<div class="c col-xs-12 col-sm-10">Graph</div>
<div class="col-xs-12 col-sm-2 hidden-xs"></div>
<div class="b col-xs-12 col-sm-10">Meters</div>
<div class="a col-xs-12 col-sm-2 visible-xs">Buttons</div>
</div>
Working fiddle