I have the following HTML:
<div class="d-sm-flex flex-sm-row flex-sm-row-reverse">
<div class='ml-2'></div>
<div class='ml-2'></div>
<div class='ml-2'></div>
</div>
Which works as intended, howeer in XS mode I want to display columns as usual. But if I set the div classes to col ml-2 then it ruins the flex display. How can I set this to display cols in XS but flex in SM and above?
So based on your comment here is what you can do:
<div class="container">
<div class="row">
<div class='col-4 col-sm-12 ml-2'>TEST</div>
<div class='col-4 col-sm-12 ml-2'>TEST</div>
<div class='col-4 col-sm-12 ml-2'>TEST</div>
</div>
</div>
I made use of Bootstrap's row and col and placed it all in a container. But the concept for the columns is that for sizes up and to sm it will be col-4 (you can change the column sizes to your desire) and for everything after sm it will be col-12 meaning it will fill the width.
Please try this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="d-flex flex-row-reverse">
<div class='col ml-2'>11</div>
<div class='col ml-2'>22</div>
<div class='col ml-2'>33</div>
</div>
<div class=" d-flex flex-row-reverse">
<div class='ml-2'>44</div>
<div class='ml-2'>55</div>
<div class='ml-2'>66</div>
</div>
</body>
</html>
Related
I am trying to use two container in row and with window resize they auto resize till md size and then stack up on each other
But I am having issues with controlling the image size in the container as it resizes rather than reducing with window size.
When i sample test they go well as below
but When i use image and content , it will resize and making an issue
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Three Column Grid Layouts for Tablets (landscape) and Desktops</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
/* Some custom styles to beautify this example */
.demo-content{
padding: 15px;
font-size: 18px;
background: #dbdfe5;
margin-bottom: 15px;
}
.demo-content.bg-alt{
background: #abb1b8;
}
</style>
</head>
<body>
<h2 class="text-center my-3">Bootstrap Responsive Layout</h2>
<div class="text-center">Open the output in a new blank tab (Click the arrow next to "Show Output" button) and resize the browser window to understand how the Bootstrap responsive grid system works.</div>
<div class="container mt-3">
<!--Row with three equal columns-->
<div class="row">
<div class="col-lg-4">
<div class="demo-content">.col-lg-4</div>
</div>
<div class="col-lg-4">
<div class="demo-content bg-alt">.col-lg-4</div>
</div>
<div class="col-lg-4">
<div class="demo-content">.col-lg-4</div>
</div>
</div>
<!--Row with three columns divided in 1:4:1 ratio-->
<div class="row">
<div class="col-lg-2">
<div class="demo-content">.col-lg-2</div>
</div>
<div class="col-lg-8">
<div class="demo-content bg-alt">.col-lg-8</div>
</div>
<div class="col-lg-2">
<div class="demo-content">.col-lg-2</div>
</div>
</div>
<!--Row with three columns divided unevenly-->
<div class="row">
<div class="col-lg-3">
<div class="demo-content">.col-lg-3</div>
</div>
<div class="col-lg-7">
<div class="demo-content bg-alt">.col-lg-7</div>
</div>
<div class="col-lg-2">
<div class="demo-content">.col-lg-2</div>
</div>
</div>
</div>
</body>
</html>
`
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">50%</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
<div class="col-sm-4" style="background-color:orange;">33.33%</div>
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
</div>
</div>
</div>
</body>
</html>
On bigger screen you can see 2 and 3 columns respectively but in print view why every col is in new line ?
because Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with a flexbox and is fully responsive.
I'm working on a page (Angular) that dynamically displays bootstrap cards that looks as follows:
<div class="row">
<div class="card border-primary p-0 mb-2 col-md-4 col-sm-6 colxs-12" *ngFor="let m of myVals">
<h4 class="card-header text-center">{{m.Title}}</h4>
<div class="card-body">
<h5>{{m.Year}}</h5>
<img [src]="m.Poster" [alt]="m.Title" class="card-img-top">
</div>
</div>
</div>
The issue I'm facing is with the element <h4 class="card-header text-center">{{m.Title}}</h4>
The challenge is that sometimes the title gets displayed on 2 lines, other times on 1 (but never more than 2) and, so, the cards aren't looking uniform.
What I'm wondering is if there's a Bootstrap / CSS way to always make the card-header display as 2 lines high regardless of the text within it. I've tried setting a CSS style of line-height: 2, but it's not affecting it at all. Any correct / better way to accomplish this?
Thanks!
You can add the custom CSS to do it. check working fiddle below -
.card-header-custom {
min-height:80px;
display:flex;
justify-content:center;
align-items:center;
}
<!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.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Card Header and Footer</h2>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header big content Header big content </div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML:
<div>
<h4>
<span>One line heading</span>
</h4>
<h4>
<span>Assume this heading has two lines</span>
</h4>
</div>
CSS:
h4 {
height: 2.5em;
}
h4 span {
line-height: 1.25em;
}
in my case i have to use 5 col-md for one row and another col-md needs to go next row without open row.
i tried with nth:child and its not help for me please help me to fix this issue
Please click full page on snippet to better view
.col-md:nth-child(5){
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">hi my name is</div>
<div class="col-md">this is next row</div>
<div class="col-md">this is next row</div>
<div class="col-md">this is next row</div>
</div>
</div>
</body>
</html>
You can simply do it by set flex-basis to 20%.
.col-md {
flex: 0 0 20%;
}
The issue is that you are using seven containers. You need six. The next thing, you have to attach the correct class for the last container (100%). Which is col-md-12. You won't need any additional CSS. Everything you need is supported by Bootstrap. Please revisit the Bootstrap documentation on how layouting works!
As an additional information col-md occupies as much space in width as is available (evenly distributed between all elements/containers in a row).
The below example demonstrates how you can do that.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: red" class="col-md">
hi my name is
</div>
<div style="background: green" class="col-md-12">
this is next row
</div>
</div>
</div>
</body>
</html>
Update: You can also do it like that without col-md-12.
.col-md:nth-child(5){
flex: 0 0 100%;
}
To stretch the col-md at position 5 to 100%.
You need to allow the wrap then control the flex-basis
.col-md:nth-child(n + 6) {
flex-basis:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row flex-wrap">
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
hi my name is
</div>
<div class="col-md">
this is next row
</div>
<div class="col-md">
this is next row
</div>
<div class="col-md">
this is next row
</div>
</div>
</div>
How to change columns order on window resize in bootstrap 3 grid?
Here an image what i try to get:
Change bootstrap order on window resize
PROBLEM SOLVED!
CODE:
<div class="row">
<div class="col-lg-2 col-md-6 col-xs-6">Box1
</div>
<div class="col-lg-2 col-lg-push-8 col-md-6 col-xs-6">Box2
</div>
<div class="col-lg-8 col-lg-pull-2 col-md-12 col-xs-12">Box3
</div>
</div>
You can add multiple classes for different window size. use this code in your local html file
<!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.3.7/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.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</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 768px wide.</p>
<div class="row">
<div class="col-lg-4 col-md-6" style="background-color:lavender;">.col-sm-4</div>
<div class="col-lg-4 col-md-6" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-lg-4 col-md-12" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>