I want to put the content I have(for example image) in center of the row and column.
I tried using justify-content-center, or align-item and text-align: center, but none worked.
I need the image to be in center of the row. Like, if I have 4 columns, i need tohem to be centered on all 4 columns.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Stilurile mele -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Fisier spre jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<!-- Fisier spre javascript -->
<script type="text/javascript" src="file.js" async></script>
<!-- FontAwesome - Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-12">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
</div>
</div>
</div>
</body>
</html>
You can use the following CSS on the images:
display: block;
margin: 0 auto
Full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Stilurile mele -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Fisier spre jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<!-- Fisier spre javascript -->
<script type="text/javascript" src="file.js" async></script>
<!-- FontAwesome - Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-12">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 has new class which you can add with row class to center the content.
<div class="row justify-content-center">
!-- your content here --!
</div>
Hopefully will help you. This is also answered in similar question
Center Contents of Bootstrap row container
Just Add text-center class to each column you want its content to be aligned center.
<div class="col-xl-4 text-center">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
Here is the link to your code with this class added to every column.
Link
Related
This question already has answers here:
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed last month.
Please take a look at the demo code. When you scroll to the bottom, the stick to top element is always at the top, but the stick to bottom element does not stick to the bottom at all. Is there anything wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row" style="height: 2000px;">
<div class="col bg-success">
<div class="col bg-info" style="position: sticky; top: 0">
Stick to top
</div>
</div>
<div class="col bg-danger">
<div class="col bg-warning" style="position: sticky; bottom: 0">
Stick to bottom
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
</body>
</html>
Thank you.
I recommend paying attention to this answer to a similar problem. In your case, accordingly, you can try to make the parent element as flex (.d-flex in Bootstrap), and for the stick element add margin-top: auto (.mt-auto in Bootstrap).
A modified example is below:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row" style="height: 2000px;">
<div class="col bg-success">
<div class="col bg-info" style="position: sticky; top: 0">
Stick to top
</div>
</div>
<div class="col bg-danger d-flex">
<div class="col bg-warning mt-auto" style="position: sticky; bottom: 0">
Stick to bottom
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
</body>
</html>
For example:
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="image">
<img src="https://picsum.photos/1200/1200" alt="" class="img-fluid">
</div>
</div>
<div class="col-lg-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
The sandbox code:
https://codesandbox.io/s/interesting-euler-sh22vn?file=/index.html
Photo what I want:
https://ibb.co/MnLQf6n
My problem is when I add fix height, the text is moving when I change screen view.
I need to vertical align the text to image center point on desktop screen.
just add align-items-center to row and it will worce the layout to be vertically center learns about flex from here and bootstrap flex properties from here
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row align-items-center">
<div class="col-8">
<div class="image">
<img
src="https://picsum.photos/1200/1200"
alt=""
class="img-fluid"
/>
</div>
</div>
<div class="col-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
This will solve your problem.
<div class="row align-items-center">
This question already has answers here:
How to place div side by side
(7 answers)
Closed 1 year ago.
I want to have the text "burger king" written just to the right of the logo, can someone tell how to do that? I tried to do it by using bootstrap class pull-left but no change appeared.
This is what my page looks like:
body {
font-size: 16px;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
#header-nav {
background-color: gold;
}
#logo-img {
width: 150px;
height: 150px;
margin: 10px 15px 10px 40px;
}
.float-container {
border: 3px solid #fff;
padding: 20px;
}
<!doctype html>
<html lang="en">
<head>
<title>DEV RESTAURANT</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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="restaurant.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-light ">
<div class="container-fluid">
<div class="navbar-header">
<a class="pull-left" href="restaurant.html">
<img id="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Burger_King_logo_%281999%29.svg/640px-Burger_King_logo_%281999%29.svg.png" alt="burger king" class="d-inline-block align-text-top">
</a>
</div>
<div class="navbar-brand">
<a href="restaurant.html">
<h1>Burger King</h1>
</a>
</div>
</div>
</nav>>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I would probably leverage Bootstrap's built-in flexbox classes:
<div class="container-fluid d-flex justify-content-start">
body {
font-size: 16px;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
#header-nav {
background-color: gold;
}
#logo-img {
width: 150px;
height: 150px;
margin: 10px 15px 10px 40px;
}
.float-container {
border: 3px solid #fff;
padding: 20px;
}
<!doctype html>
<html lang="en">
<head>
<title>DEV RESTAURANT</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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="restaurant.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-light ">
<div class="container-fluid d-flex justify-content-start">
<div class="navbar-header">
<a href="restaurant.html">
<img id="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Burger_King_logo_%281999%29.svg/640px-Burger_King_logo_%281999%29.svg.png" alt="burger king" class="d-inline-block align-text-top">
</a>
</div>
<div class="navbar-brand">
<a href="restaurant.html">
<h1>Burger King</h1>
</a>
</div>
</div>
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap‘s grid system (https://getbootstrap.com/docs/4.0/layout/grid/) might help in this case; you can place div elements side-by-side using this code snippet:
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
To correctly align the elements, you can use Bootstrap‘s align-items-center class.
Source: https://getbootstrap.com/docs/4.0/layout/grid/ and TutorialRepublic
<!doctype html>
<html lang="en">
<head>
<title>DEV RESTAURANT</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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<link rel="stylesheet" href="restaurant.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-light ">
<div class="container-fluid">
<div class="navbar-header">
<a href="restaurant.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Burger_King_logo_%281999%29.svg/640px-Burger_King_logo_%281999%29.svg.png" alt="burger king" height="75" width="75"> Burger King:
</a>
</div>
</div>
</nav>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I'm in my beginning of Web development, and I built a simple HTML web page with bootstrap-4.
I want to display 2 card horizontally so the image card will be in the left to the text card. When the screen is small I want the image to be below the text card. But if the card in the left to the second card it automatically display above it.
My code is like that:
<div class="container">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
</div>
<div class="col-md-7">
<div class="card-body">
<p>The text card in the right to the image card.</p>
<p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
</div>
</div>
</div>
</div>
</div>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Que</title>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
</div>
<div class="col-md-7">
<div class="card-body">
<p>The text card in the right to the image card.</p>
<p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
The horizontal result is:
And the vertical result for small screen is:
I want to display the image in the bottom, below to the text card in small screens, but in the left in wide screens.
Thank you for your help!
Set order class order-1 ,order-2 and order-md-1, order-md-2 for changing position for desktop and mobile
Since Bootstrap 4 is flexbox, it's easy to change the order of
columns. The cols can be ordered from order-1 to order-12,
responsively such as order-md-12 order-2 (last on md, 2nd on xs)
relative to the parent .row, The responsive ordering classes are
order-first, order-last and order-0 - order-12.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Que</title>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-5 order-md-1 order-2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
</div>
<div class="col-md-7 order-md-2 order-1">
<div class="card-body">
<p>The text card in the right to the image card.</p>
<p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have an issue with a menu im trying to create. I kinda got the old bootstrap, but this whole flex-thingy is confusing for me. So, i want to have a 80px dark vertical side menu and the rest of the screen should be a "working area". My problem is that the items in the side menu does not have full width (see the borders below) and I cant seem to figure out why not. I am guessing right now, that it has something to do with the flexbox - an item taking up only the space it needs. Im have copied the code from bootstrap 4 website and modified a bit. But that last bit, where I can get full width on the items - that one I am missing.
.nav-item{
color:#FEFEFE!important;
border-bottom:1px solid #666;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Ticket</title>
</head>
<body>
<div class="container-fluid" style="height:100%">
<div class="row" style="height:100%">
<div class="col-sm-2 col-md-2 col-lg-1 col-xl-1" style="padding:0px!important;height:100%">
<nav class="navbar navbar-expand-sm px-0 flex-row " style="background-color:#333;height:100%;">
<div class="navbar-collapse collapse" id="navbarWEX">
<div class="nav flex-column">
<a routerLink="/" class="nav-item">Home</a>
<a routerLink="/first" class="nav-item">First Item</a>
<a routerLink="/second" class="nav-item">Second Item</a>
</div>
</div>
</nav>
</div>
<div class="col py-2">
<h2>Hello There</h2>
<p>Test test test test test test test</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
It's not related to your .nav-item, it's because .nav doesn't take full width of its parent. Try updating bootstrap to 4.1 and insert .flex-fill to your nav:
.nav-item{
color:#FEFEFE!important;
border-bottom:1px solid #666;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Ticket</title>
</head>
<body>
<div class="container-fluid" style="height:100%">
<div class="row" style="height:100%">
<div class="col-sm-2 col-md-2 col-lg-1 col-xl-1" style="padding:0px!important;height:100%">
<nav class="navbar navbar-expand-sm px-0 flex-row " style="background-color:#333;height:100%;">
<div class="navbar-collapse collapse" id="navbarWEX">
<div class="nav flex-column flex-fill">
<a routerLink="/" class="nav-item">Home</a>
<a routerLink="/first" class="nav-item">First Item</a>
<a routerLink="/second" class="nav-item">Second Item</a>
</div>
</div>
</nav>
</div>
<div class="col py-2">
<h2>Hello There</h2>
<p>Test test test test test test test</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
In case you don't want to update bootstrap, you can simply add flex: 1 1 auto to .nav style:
.nav-item{
color:#FEFEFE!important;
border-bottom:1px solid #666;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Ticket</title>
</head>
<body>
<div class="container-fluid" style="height:100%">
<div class="row" style="height:100%">
<div class="col-sm-2 col-md-2 col-lg-1 col-xl-1" style="padding:0px!important;height:100%">
<nav class="navbar navbar-expand-sm px-0 flex-row " style="background-color:#333;height:100%;">
<div class="navbar-collapse collapse" id="navbarWEX">
<div class="nav flex-column" style="flex: 1 1 auto">
<a routerLink="/" class="nav-item">Home</a>
<a routerLink="/first" class="nav-item">First Item</a>
<a routerLink="/second" class="nav-item">Second Item</a>
</div>
</div>
</nav>
</div>
<div class="col py-2">
<h2>Hello There</h2>
<p>Test test test test test test test</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>