I need to place an image outside the container, so that the right margin stays the default container (responsive), and the image always stays together with a button.
Follow the image below to exemplify:
I tried to use container-fluid (Example 2 - using container-fluid in html), but I can't use the same margin as the container on the right side. I can change by css, but would have to change for all breakpoints, has another way?
I tried to use the container itself (Example 3 - using container and margin-left: 0px in html) and remove the margin-left without success.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Examples</title>
<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" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<h2>Example 1</h2>
<div class="">
<div class="container">
<div class="row">
<div class="col-6 row">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="ex1 mt-5">
<h3>Example 2 - using container-fluid</h3>
<div class="container-fluid">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="mt-5">
<h3>Example 3 - using container and margin-left: 0px</h3>
<div class="container" style="margin-left: 0px">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
</body>
</html>
Would anyone know any way to do it without me having to change this margin-right on all breakpoints?
I don't think you can do this in bootstrap.
If you give your button position:relative then it will no longer flow with the rest of the grid and can always be to the right of the image/text
https://www.w3schools.com/css/css_positioning.asp
is a good tutorial on different position options
Well you can always make use of
display: flex;
which would allow do what you have above easily.
Checkout how to use flex
Related
Hello i am stuck in this problem. I have 2 Rows and 4 Columns ( col-md-8 & col md-4 in each row).
Structure is like below (also attached screenshot and code):
Inside container
Row 1 Column 1 (md-8) Row 1 Column 2 (md-4) [Accordion]
Row 2 Column 1 (md-8) Row 2 Column 2 (md-4)
The Column 2 of Row 1 is accordion and when it is expanded it takes whole row 2 with it but i want it to take just column below it which is Row 2 Column 2
See the attached images to have a better understanding:
R2C1 has already space greater than R2C2
When accordion is expanded R2C1 gets too much extra space as compared to R2C2
Is there any thing i am missing or fix this? Thank you.
Here is the code demo
https://stackblitz.com/edit/bootstrap-5-q5cctv?file=src%2Findex.html
Code:
<!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.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-12">
<span class="fw-1">Row 1 Column 1</span>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-3">
<span>R1 C2</span>
<!-- <i class="bi bi-printer-fill"> bi bi-envelope-at-fill </i> -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Photo Editing,.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
second item's accordion body. Let's imagine this being filled with some
actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseThree"
aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
third item's accordion body. Nothing more exciting happening here in terms
of content, but just filling up the space to make it look, at least at first
glance, a bit more representative of how this would look in a real-world
application.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-12">
<span class="fw-1">Row 2 Column 1</span>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="mt-4 p-5 bg-white rounded-3">
<div class="row">
<div class="col-md-3">
<span>R2 C2</span>
</div>
</div>
<hr class="my-4">
<div class="row">
<div class="col-md-12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="pt-3 mt-4 text-muted border-top">
© 2023
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js"
integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
</body>
</html>
If you don't want the content in second row pushed down after the accordion show, you shouldn't put them on different rows.
Inside container you can use structure like this:
<div class"row">
<div class="col-8">
<div>Some content here</div>
<div>Some content here</div>
</div>
<div class="col-4">
<div>Some content here</div>
<div>Some content here</div>
</div>
</div>
Please note that I removed structures like this:
<div class="row">
<div class="col-12">
Some content here
</div>
</div>
because they are not needed here and you should use flexbox wisely.
Code snippet below, you can run it full page.
<!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.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="mt-4 p-5 bg-white rounded-3">
<span class="fw-1">Row 1 Column 1</span>
<hr class="my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
<div class="mt-4 p-5 bg-white rounded-3">
<span class="fw-1">Row 2 Column 1</span>
<hr class="my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
<div class="col-md-4">
<div class="mt-4 p-5 bg-white rounded-3">
R1 C2
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse"
aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Photo Editing,.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
second item's accordion body. Let's imagine this being filled with some
actual content.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#flush-collapseThree"
aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse"
aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
Placeholder content for this accordion, which is
intended to demonstrate the <code>.accordion-flush</code> class. This is the
third item's accordion body. Nothing more exciting happening here in terms
of content, but just filling up the space to make it look, at least at first
glance, a bit more representative of how this would look in a real-world
application.
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 p-5 bg-white rounded-3">
R2 C2
<hr class="my-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus eos, enim quibusdam nemo tempore modi ducimus eveniet similique, voluptatibus quas totam suscipit eius error accusantium veritatis velit, quis reprehenderit unde.</p>
</div>
</div>
</div>
<footer class="pt-3 mt-4 text-muted border-top">
© 2023
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js"
integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD"
crossorigin="anonymous"></script>
</body>
</html>
Bootstrap 4 - the content in the navigation bar moves slightly to the right when the page is shorter than the screen height - this doesn't happen with longer pages. I have posted the code from two pages. A home page which is the longer page and a login page which is shorter and twitches.
I am wondering if the solution is to give a minimum height for the content - though I would prefer not to override Boostrap
Longer content with static non twitching navbar
<!-- head start -->
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Home page of MVC test </title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<!-- Custom CSS -->
<link href="/css/blog-home.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- head end -->
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MVC Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation_bar" aria-controls="navigation_bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation_bar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class='nav-item active'><a href='http://mvc.test/home' class='nav-link' >Home</a></li><li class='nav-item'><a href='http://mvc.test/posts' class='nav-link' >Posts</a></li><li class='nav-item'><a href='http://mvc.test/about' class='nav-link' >About</a></li><li class='nav-item'><a href='http://mvc.test/register' class='nav-link' >Register</a></li><li class='nav-item'><a href='http://mvc.test/login' class='nav-link' >Login</a></li> </ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- page content start -->
<div class="container">
<!-- start of row -->
<div class="row">
<!-- page content left start -->
<div class="col-md-8">
<h1 class="page-header">
Home </h1>
<h2 ><a href = "#" >A first post - I do say</a ></h2 >
<p class="lead">
by Start Bootstrap
</p>
<p><span class="glyphicon glyphicon-time"></span>2020-02-03 11:00:00</p>
<hr>
<img class="img-fluid" src="http://placehold.it/900x300" alt="">
<hr>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<hr>
<h2 ><a href = "#" >A second post</a ></h2 >
<p class="lead">
by Start Bootstrap
</p>
<p><span class="glyphicon glyphicon-time"></span>2020-02-03 16:00:00</p>
<hr>
<img class="img-fluid" src="http://placehold.it/900x300" alt="">
<hr>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<a class="btn btn-primary" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<hr>
</div>
<!-- page content left end -->
<!-- page content right start -->
<div class="col-md-4 bg-light ">
<!-- Blog Search Well -->
<div class="pt-3 ml-1">
<h4>Blog Search</h4>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<!-- /.input-group -->
</div>
<!-- Blog Categories Well -->
<div class="pt-1 ml-1">
<h4>Blog Categories</h4>
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled">
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
</ul>
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
<li>Category Name
</li>
</ul>
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
<!-- Side Widget Well -->
<div class="bg-light">
<h4>Side Widget Well</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.</p>
</div>
</div>
<!-- page content right end -->
</div>
<!-- end of row -->
<!-- Footer -->
<footer>
<div class="row">
<div class="col-md-12">
<p>Copyright © Your Website 2014 </p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- end of container -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
<!-- page content end -->
Shorter content with content that moves or twitches to the right
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>This is a login title </title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/main.css">
<!-- Custom CSS -->
<link href="/css/blog-home.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">MVC Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation_bar" aria-controls="navigation_bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation_bar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class='nav-item'><a href='http://mvc.test/home' class='nav-link' >Home</a></li><li class='nav-item'><a href='http://mvc.test/posts' class='nav-link' >Posts</a></li><li class='nav-item'><a href='http://mvc.test/about' class='nav-link' >About</a></li><li class='nav-item'><a href='http://mvc.test/register' class='nav-link' >Register</a></li><li class='nav-item active'><a href='http://mvc.test/login' class='nav-link' >Login</a></li> </ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-12 ">
<div class="col-md-6 mx-auto">
<div class="card card-light bg-light mt-5">
<h2>Login to your account</h2>
<p>Please fill in your credentials</p>
<form action="http://mvc.test/login" method="post" >
<div class="form-group">
<label for="email">Email: <sup>*</sup></label>
<input type="email" name="email" class="form-control form-control-lg " value="">
<span class="invalid-feedback"></span>
</div>
<div class="form-group">
<label for="password">Password: <sup>*</sup></label>
<input type="password" name="password" class="form-control form-control-lg " value="">
<span class="invalid-feedback"></span>
</div>
<div class="row">
<div class="col">
<input type="submit" value="Login" class="btn btn-success btn-block">
</div>
<div class="col">
Don't have an account? Login
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" >
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-md-12">
<p>Copyright © Your Website 2014 </p>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</footer>
</div>
<!-- end of container -->
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
thanks C
html {
overflow-y: scroll;
}
This is a solution to my 'twitching' nav bar, see above. I've read that this is not a good CSS and that it doesn't work in opera - however I've seen that the BBC website uses this if that means anything.
In my Angular 8 app I have a PrimeNG DataView element. In this element, simple I would add a row with the name of the fields at the bottom of the header.
So, I tried to add a <div> tag in every possible position of the html code of this component to understand how to do and: or this tag was too hight (it was visible, but not at the bottom of the header, but i.e. between search row and paginator row), or it was hidden. It was impossible to me, add a div tag in correct position, making this div visible.
I attach an image (please, consider the only point 1) and the code.
<p-header>
<div class="ui-helper-clearfix">
<div class="ui-g">
<div class="ui-g-12 ui-md-4">
<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By" (onChange)="onSortChange($event)" [style]="{'min-width':'140px'}"></p-dropdown>
</div>
<div class="ui-g-6 ui-md-4 filter-container">
<div style="position:relative">
<input type="search" pInputText placeholder="Search by brand" (input)="dv.filter($event.target.value)">
</div>
</div>
<div class="ui-g-6 ui-md-4" style="text-align:right">
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
</div>
</div>
<!-- A div at this exact position is visibile but is not at the bottom of header -->
</div>
<!-- A div at this exact position, maybe the better and more logic one, is unvisible -->
</p-header>
<!-- End of the header, start of data row; a div at this exact position is unvisible -->
<ng-template let-person pTemplate="listItem">
<div class="ui-g-12">
<div class="car-details">
<div>
<div class="ui-g">
<div class="ui-g-12">Vin: <b>{{person.id}}</b></div>
<div class="ui-g-12">Year: <b>{{person.name}}</b></div>
<div class="ui-g-12">Brand: <b>{{person.surname}}</b></div>
<div class="ui-g-12">Color: <b>{{person.officeNumber}}</b></div>
</div>
</div>
<button pButton type="button" icon="pi pi-search" (click)="selectPerson($event, person)"></button>
</div>
</div>
</ng-template>
As per my understanding from your question, I have added a row for you. Please see the screenshot for reference. For your convenience I have highlighted in lightblue background color.
To Achieve this: In your component.html Please see the lorem block
<p-dataView
#dv
[value]="cars"
[paginator]="true"
[rows]="20"
paginatorPosition="both"
filterBy="brand"
[sortField]="sortField"
[sortOrder]="sortOrder"
>
<p-header>
<div class="ui-helper-clearfix">
<div class="ui-g">
<div class="ui-g-12 ui-md-4">
<p-dropdown
[options]="sortOptions"
[(ngModel)]="sortKey"
placeholder="Sort By"
(onChange)="onSortChange($event)"
[style]="{ 'min-width': '140px' }"
></p-dropdown>
</div>
<div class="ui-g-6 ui-md-4 filter-container">
<div style="position:relative">
<input
type="search"
pInputText
placeholder="Search by brand"
(input)="dv.filter($event.target.value)"
/>
</div>
</div>
<div class="ui-g-6 ui-md-4" style="text-align:right">
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
</div>
<div class="ui-g white-bg">
<div class="ui-g-6 ui-md-4">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Accusamus cupiditate dolores esse id ipsam omnis
reiciendis repellat, temporibus voluptas? Consequuntur
dolor inventore natus, porro quis tempore veniam.
Consectetur consequatur deleniti esse ex molestiae rem
sed temporibus voluptates! Ad aliquam, aspernatur cum
cumque fugiat harum ipsa, ipsam laudantium modi nemo
perferendis perspiciatis quis, quos rerum veritatis?
</div>
</div>
</div>
</div>
</p-header>
Step 2: In your component.css:
:host ::ng-deep {
.white-bg {
background-color: lightskyblue;
}
}
You can follow the same approach if you want to display the row below the pagination.
When I add padding around an image at the top of a card when in dev tools mobile view, the image doesn't keep aspect ratio. When I go back to full size view the aspect ratio is fine.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
More info
</div>
</div>
</div>
My code
Image of how it looks in dev tool mobile
The thing is if I go to my code pen in dev tools mobile view it seems to be working as it should, but from my file it isn't. This is the reason I'm so confused about it.
You wanted to maintain aspect ratios, does this work for you ?
.card { display:block !important; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
More info
</div>
</div>
</div>
I've been searching for an answer all day and have not quite found one.
Using Bootstrap 4, how does one wrap text around an image using d-flex or flex-wrap in with the grid layout with columns and rows. I have provided my code and two image examples. I hope this is possible.
I have viewed this example - https://www.codeply.com/api/run but it's quite different whereas the image is fixed sizing but we need the image to be responsive.
Cheers and thanks in advance.
Example image here with photo
Example diagram here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container" style="margin-top: 30px;">
<div class="row" style="border: 1px solid #ddd;">
<div class="col-sm-6 col-lg-6 col-xl-5">
<div class="imagebox">
<figure>
<img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
<figcaption class="imagebox-desc">VERANDAHS<br>
<span class="small">Superior Central Location...</span></figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-6 col-xl-7">
<div class="row">
<div class="col-12"><small>BPP Rating - 88%</small></div>
<!-- this below line will wrap on all screens -->
<div class="col-6"><small>Online Rating - 88% </small></div>
<div class="col-6 text-right"><small>Total Beds - 50</small></div>
</div>
<hr style="margin: 0.5rem 0;">
<div class="row">
<div class="col-sm-6 col-6"><small>Share Rooms from NZD $30</small></div>
<div class="col-sm-6 col-6 text-right"><small>Private Rooms from NZD $60</small></div>
</div>
<div class="row">
<div class="col-12 d-none d-lg-block d-xl-block">Lorem ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vel postea scripta alienum, eam te enim feugiat ornatus. Exerci quidam melius has ad. Mel ut ludus choro
instructior. Erat dictas antiopam quo ea, pri at audiam offendit.Cetero albucius pri ne, erant nobis aliquip cu sit, eam dolore.</div>
</div>
</div>
</div>
you can try like this, by giving background-image on the row and its property to set it one center of the div
here is an example - https://jsfiddle.net/erymag7b/27/
you can use float:left in .imagebox to wrap text around an image and use clean:both in P tag to let text under an image
https://codepen.io/lichunbin814/pen/yqEOKm?editors=1100
tip : Avoid Inline Styles for CSS Design
.imagebox {
float: left;
margin-right: 1em;
}
div.container {
max-width: 100%;
}
figcaption.imagebox-desc {
top: 0;
position: absolute;
left: 0;
color: white;
background: rgba(4, 4, 4, 0.8);
width: 100%;
padding: 0.7rem 0 0.5rem 1.2rem;
font-size: 1.2rem;
}
.imagebox-inner {
position: relative;
display: inline-block;
}
.img {
width: 100%;
}
#media (max-width: 768px) {
.text {
clear: both;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12">
<div class="imagebox">
<figure class="imagebox-inner">
<img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
<figcaption class="imagebox-desc">VERANDAHS<br>
<span class="small">Superior Central Location...</span></figcaption>
</figure>
</div>
<div><small>BPP Rating - 88%</small></div>
<div class="d-flex justify-content-between"> <small>Online Rating - 88% </small> <small>Total Beds - 50</small></div>
<hr class="m3">
<div class="d-flex justify-content-between"><small>Share Rooms from NZD</small><small>Private Rooms from NZD</small></div>
<div class="d-flex justify-content-between"><small>$30</small><small>$60</small></div>
<p class="mt-2 text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,Lorem
ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet
sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No v molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
</div>
</div>
</div>