Using Bootstrap 4 in my Angular 5 application I have two form groups right next to each other. When the text label of one is much longer than the other, the input fields don't line up, which ends up looking strange when there are multiple rows like this on the page.
You can see exactly what I mean at https://angular-wcd2ln.stackblitz.io/
How can I tell it that I want the two input labels to be vertically aligned together and have the label "push down" with the input field?
Use the flexbox utility classes (d-flex flex-column) on the form-group, and mt-auto (margin-top:auto) on the form-control inputs...
<div class="row">
<div class="col-6">
<div class="form-group h-100 d-flex flex-column">
<label for="left">This is a short label.</label>
<input class="form-control mt-auto" id="left" type="text">
</div>
</div>
<div class="col-6">
<div class="form-group h-100 d-flex flex-column">
<label for="right"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </label>
<input class="form-control mt-auto" id="right" type="text">
</div>
</div>
</div>
https://www.codeply.com/go/z0vucbNNU9
Related
I am using bootstrap 4 and I want the paragraph text to display across the width of the box. How can I make it spread over most of it?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="alert alert-info">
<div class="row">
<p class="col-xs-12">
<div class="col-xs-2 col-md-2 col-sm-2 col-lg-2"> <i class="fas fa-hand-paper fa-3x" ></i>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<H2>
Message
</H2>
<h3>
title here
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
Your message is displaying over the majority of the element's container. Your paragraph text, I assume to be the col-xs-6 class div element under the h3 (as this is the only paragraph element with text in it) is displaying 100% of its container.
If you want it to fit the entirety of the alert you need to make the container <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> fit the entire row by changing the numbers 6 to 10:
<div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
This is because bootstrap runs off a 12 grid system. You had 4 unused grid spaces.
Read more here: https://getbootstrap.com/docs/4.0/layout/grid/
It should also be noted that col-xs is no longer supported in Bootstrap 4. The extra small size is now just col-number.
I'm playing around with Bootstrap and considering using a single row and column wrapping for my design. The reason for this is because I want to reorder the elements depending on the screen size. Current code is as follows:
<div class="container">
<div class="row">
<div class="col-12 nav-bar">
Navigation
</div>
<div class="col-12 header">
Header
</div>
<div class="col-12 content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
adminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-6 feature sign-up">
Sign up
</div>
<div class="col-6 feature feature-1">
Feature 1
</div>
<div class="col-6 feature feature-2">
Feature 2
</div>
<div class="col-6 feature feature-3">
Feature 3
</div>
</div>
</div>
Is it possible to make the third column content the first column for the lg screen size? I see the order class lets you assign order based from 1-12. I tried using <div class="col-12 content order-md-1"> but it made it the last element, not the first.
The following css will do the trick.
You are basically implementing the order-first class manually but only for large screens
#media (min-width:1200px){
.content{
order:-1;
}
}
heres a codepen you can play with
https://codepen.io/mugwag/pen/VwvpNRV
I want to put a text between two images in bootstrap grid. But images in row sections change their aspect ratio(original is 1:1) and do not resize correctly.
(Codepen: https://codepen.io/Oktocorp/pen/yMxpwX?editors=1100)
<div class="container">
<div class="row">
<img class="img-fluid rounded-circle col-lg-3 col-md-3 col-sm-12" src="https://image.ibb.co/dEZA5a/true_detective1.jpg" alt="true_detective1">
<p class="text-center col-lg-6 col-md-6 col-sm-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<img class="img-fluid rounded-circle col-lg-3 col-md-3 col-sm-12" src="https://image.ibb.co/jRigBF/true_detective2.jpg" alt="true_detective2">
</div>
</div>
Don't put the grid column classes on the img and p tags. Rather wrap those in div elements with the desired bootstrap classes. The reason for this is that bootstraps col-* classes need to use width and max-width properties so they are going override your css on img-fluid class. If you for example use col-md-6 then that element's width needs to be 50% of its parent - it cannot be both 50% and 100% at the same time. So you want to make your img elements children of those.
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-3 col-lg-3">
<img class="img-fluid rounded-circle" src="https://image.ibb.co/dEZA5a/true_detective1.jpg" alt="true_detective1">
</div>
<div class="col-lg-6 col-md-6 col-md-6 ">
<p class="text-center ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-12 col-md-3 col-lg-3">
<img class="img-fluid rounded-circle" src="https://image.ibb.co/jRigBF/true_detective2.jpg" alt="true_detective1">
</div>
</div>
</div>
Also for your img-fluid class change the css to:
.img-fluid {
width: 100%;
height: auto;
}
The grid card columns are meant to be used on images and paragraphs. They're meant to be containers of content.
http://www.codeply.com/go/5sip6gvYFE
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 text-center">
<img class="img-fluid rounded-circle" src="https://image.ibb.co/dEZA5a/true_detective1.jpg" alt="true_detective1">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 text-center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 text-center">
<img class="img-fluid rounded-circle" src="https://image.ibb.co/jRigBF/true_detective2.jpg" alt="true_detective2">
</div>
</div>
</div>
I am looking for code block to change image tumbnail position in WordPress theme folder.
The position what I want is , I want image tumbail is left side of Same div.row and Post's Title and Entry will be Right side of same "div.row" Element. I just want to know how to set it."
<div class="row">
<div class="foo">
<div class="bar">
<img src="images/myimage.png" alt="" titl="">
</div>
</div>
<div class="foo2">
<div class="bar2">
<h1 class="mytitle">What am I doing?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a>Read More</a>
</div>
</div>
</div>
I have this markup:
<article class="featured">
<img class="bg-featured" src="http://placehold.it/1200x400"></img>
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="featured-excerpt">
<div class="meta">
<div class="category">Watch</div>
<ul class="tags">
<li>Sustainability, Global, Learning</li>
</ul>
</div>
<div class="content">
<h1 class="title">Title</h1>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="sponsored">Sponsored content:</div>
</div>
</div>
</div>
</div>
</div>
</article>
And I want to apply to the "content" div a full width background color.
How can I do this through CSS?
Here is a jsbin to show you exactly what I'm trying to do.
You could use the .jumbotron class for this purpose. Just make sure not to put it inside an element with .container class.
Jumbotron
So here is an example using .jumbotron.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
body {
margin: 0;
}
.content {
background-color: green;
}
.jumbotron {
background-color: orange;
}
.no-left-right-padding {
padding-left: 0;
padding-right: 0;
}
#media screen and (min-width: 1200px) {
img {
width: 100%;
height: auto;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<img class="bg-featured img-responsive" src="http://placehold.it/1200x400"></img>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="title">Title</h1>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="sponsored">Sponsored content:</div>
</div>
</div>
</div>
</div>
I answered the same question here: Bootstrap 3.0: Full-Width Color Background, Compact Columns in Center
In summary, you simply add another element around the container, and style it as you like. It will cover the full width. A container inside a container-fluid is not considered good practice.
Just create a full width wrap element (div, section, etc.). Then, use .container class for a responsive fixed width container:
<article class="featured">
<img class="bg-featured" src="http://placehold.it/1200x400"></img>
<div class="overlay"></div>
<div class="full-width"> /* ADD FULL WIDTH WRAP CLASS */
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="featured-excerpt">
<div class="meta">
<div class="category">Watch</div>
<ul class="tags">
<li>Sustainability, Global, Learning</li>
</ul>
</div>
<div class="content">
<h1 class="title">Title</h1>
<p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="sponsored">Sponsored content:</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
Bootstrap .container class adds a left and right padding of 15px. Either use negative padding to fix it (padding-left: -15px; padding-right:-15px) or you can make a new .containerNew class in another css file and add these styles. For example in a file called myStyles.css do the following:
.containerNew {
background-color: green;
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}
<div class="containerNew">
<div class="row">
<div class="col-md-12">
<!-- Your Content Here -->
</div>
</div>
</div>