When I do this it right aligns as expected:
<div class="text-right">
...
...
...
</div>
I was hoping that this would cause the content to be left aligned in relation to itself, but to be right aligned within the containing div:
<div class="text-right">
<div class="text-left">
...
...
...
</div>
</div>
No such luck though, it just left aligns everything.
You should be using the grid system, not text alignment.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-4">Some text.</div>
<div class="col-8 text-right">Some right-column text.</div>
</div>
</div>
If you truly want text alignment, your text should probably be in paragraphs that can be individually aligned.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col">
<p>Some left-aligned (by default) text.</p>
<p class="text-right">Some right-aligned text.</p>
<p>Some left-aligned (by default) text.</p>
</div>
</div>
</div>
So the solution I tried actually does work. The problem was I had some elements with w-100 causing it to take up the entire width of the column and thus ensuring everything would be left aligned with the column rather than the widest element being right aligned and everything else being left aligned to that.
Related
If you'd run the following code and hover the rendered elements, you'll see that there's an unoccupied space between the left and middle elements:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-3" id="left">
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
</div>
</div>
<div class="col-sm-6" id="middle">get me lefter, to the unoccupied space</div>
<div class="col-sm-3" id="right"></div>
</div>
</div>
... Here's what you'd see (in purple is the unoccupied space):
Is it possible to add CSS that will robustly tell left to let middle use the unoccupied space, if such exists?
Also, does Bootstrap has some built-in CSS for that?
I think it's because you defined the column that will be used (col-sm-3).
With your constraint (not restructuring the HTML), you could just modify the #left div's class to col-sm-auto which tells #left to occupy only the space it needed so that there is no unused space and #middle could occupy the old unused space.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-auto" id="left">
<div class="row">
<div class="col-sm-auto">1</div>
<div class="col-sm-auto">2</div>
<div class="col-sm-auto">3</div>
</div>
</div>
<div class="col-sm-6" id="middle">get me lefter, to the unoccupied space</div>
<div class="col-sm-3" id="right"></div>
</div>
</div>
Notice the class col-sm-auto on item 1, 2, and 3. Also tell them to use the width they needed instead of defining 1 column out of 12 so that no unused space made.
I have a complex Bootstrap-4 grid-layout. Now, suddenly inside a column, I need to make the background (not the content!) reach from left of the browser-window to the right of the browser-window, the whole width. Is there any way this can be done?
<div class="container">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Hello!</h2>
<p>
This background should stay white.
</p>
</div>
</div>
<div class="row mybackground">
<div class="col">
The red background should fill ALL of the browser-width from left to right, but keep the area above and below with white background.
</div>
</div>
</div>
https://jsfiddle.net/enu2vxdw/
If you look at the fiddle, the background of < div class="mybackground" > should reach from left to right (no white paddings left and right), but the content of it should stay as it is.
Any idea how to do this with the least amount of changes (because unfortunately there are a lot places in the code where this needs to be done, so a simple css-class would be awesome).
Instead of adding rows inside a container, you should now have sections with containers.
An example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section>
<div class="container">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Hello!</h2>
<p>This background should stay white.</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col">
<h2 class="font-weight-light">Hello!</h2>
<p>This background should stay white.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row bg-danger text-white">
<!--div class="col"-->
<div class="container">
<div class="row">
<div class="col">
<p class="mt-3">The red background should fill ALL of the browser-width from left to right, but keep the area above and below with white background.</p>
</div>
</div>
</div>
<!--/div-->
</div>
</div>
</section>
The container-fluid can stretch full width. To align the content you'll have to introduce a container again.
You'll end up with quite a lot of nesting which doesn't look too pretty but I don't know another Bootstrap way around this.
This result will be fully responsive regarding the spacing.
I am new to the bootstrap. I have following bootstrap code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div style="padding-top: 25px; ">
<div class="col-md-10 col-md-offset-1" style="background-color: #F0F8FF;">
<div class="col-md-3">
<img src="{{URL::asset('/images/car.png')}}" alt="profile Pic" height="50" width="50">Car
</div>
</div>
</div>
Now, I need the first image and then under the image 'car' word in the center to the div and under word some discription about the car. like image of this. how can I do this?
See image here:
Based on the code you've provided I assume you are using Bootstrap 3.x and so the below code reflects that. The two main classes you might rely on here (because there are multiple methods to achieve your desired outcome) would be .text-center and .center-block. The first simply applies text-align: center to the element while the latter alters the display and left/right margin to force centering.
.your-custom-background {
background: #F0F8FF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="your-custom-background text-center">
<img src="https://placehold.it/50/50/" alt="profile Pic" height="50" width="50" class="center-block">
<p>Car</p>
<p>Some additional description goes here.</p>
</div>
</div>
</div>
</div>
A couple of additional notes as you mention you are new to Bootstrap:
(1) Because Bootstrap's Grid applies padding to the column wrapper, you should avoid applying backgrounds directly to this element unless your desire is to re-color both the content area AND the gutter.
(2) It's not clear why you're using .col-md-3 inside your .col-md-10 but columns must always be wrapped within a .row, even when nested.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-3 text-center">
<img class="d-block m-auto" src="https://placehold.it/50x50"/>
<div>Car</div>
<div>62.3333</div>
<div>text text text texttext texttext texttext text</div>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
</div>
Please see code snipped: I am trying to align the divs with "Learn More" at the bottom of the columns at the same vertical height regardless of the height of the previous div.
Duplicate Disclaimer: I've been looking at How can I make Bootstrap columns all the same height? and How can I make Bootstrap 4 columns all the same height? which seem to be a similar problem. However, the solutions do not work for me as they are mostly for BS3 (e.g. I tried the examples with class="row-eq-height"), and most answers with regard to BS4 imply that the equal height is default in BS4.
However as you can see from the red borders, only the outer column height is "stretched" to the bottom by default, the inner one is only equal to text height. I'm very confused.
* { border: 1px solid red !important; }
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="row text-center no-gutters">
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
</div>
<div class="align-items-end">
Learn more 1
</div>
</div>
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">one line text example</p>
</div>
<div class="align-items-end">
Learn more 2
</div>
</div>
<div class="col-sm-4">
<div>
<h4>Components and examples</h4>
<p class="body-block-3 mx-auto">multiple line text example random text should break across multiple lines</p>
</div>
<div class="align-items-end">
Learn more 3
</div>
</div>
</div>
</body>
Also, I've tried various Bootstrap alignment options such as strechting the middle div with "align-items-stretch" and using "d-flex align-items-end" for the last div. Nothing works.
Columns in bootstrap are not display: flex and that is why the align-items-end is not working. Add the classes d-flex and flex-column to your column classes. Added the class .flex-1 and put this on your upper div.
* {
border: 1px solid red !important;
}
.body-block-3 {
max-width: 250px;
margin-left: auto;
margin-right: auto;
}
.flex-1 {
flex: 1;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="row text-center no-gutters">
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">multiple line text example random text should break across multiple lines</p>
</div>
<div>
Learn more 1
</div>
</div>
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">one line text example</p>
</div>
<div>
Learn more 2
</div>
</div>
<div class="col-sm-4 d-flex flex-column">
<div class="flex-1">
<h4>Components and examples</h4>
<p class="body-block-3">multiple line text example random text should break across multiple lines</p>
</div>
<div>
Learn more 1
</div>
</div>
</div>
</body>
EDIT: Also wanted to mention you could use a boostrap utility class mb-auto instead of flex-1
<div class="col-sm-4 d-flex flex-column">
<div class="mb-auto">
<h4>Components and examples</h4>
<p class="body-block-3">one line text example</p>
</div>
<div>
Learn more 2
</div>
</div>
However your upper div will not take up the entire space (stretch), not sure if this is an issue with your use case. If not, you would not have to make any new classes and would be following the docs on bootstrap's with align-item section
EDIT: Updated for .body-block-3 class
Because of inherited html parts when using template engines such as twig (PHP) or jinja2 (python), I may need to nest rows like below:
<div class="container">
<div class="row">
<div class="row">
</div>
...
<div class="row">
</div>
</div>
<div class="row">
...
</div>
</div>
Then should I wrap inner rows in column div like below:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
</div>
...
<div class="row">
</div>
</div>
</div>
<div class="row">
...
</div>
</div>
Or should they be wrappered in container again?
You shouldn't wrap the nested rows in .container elements, but you should nest them in columns. Bootstrap's row class has negative left and right margins that are negated by the col-X classes' positive left and right margins. If you nest two row classes without intermediate col-X classes, you get double the negative margins.
This example demonstrates the double negative margins:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<!-- GOOD! Second "row" wrapped in "col" to negate negative margins. -->
<div class="container">
<div class="row">
<div class="col-xs-12" style="background: lime;">
<div class="row">
Here's my text!
</div>
</div>
</div>
</div>
<!-- BAD! Second "row" missing wrapping "col", gets double negative margins -->
<div class="container">
<div class="row">
<div class="row" style="background: tomato;">
Where's my text?
</div>
</div>
</div>
For further reading, The Subtle Magic Behind Why the Bootstrap 3 Grid Works explains the column system in great and interesting detai.
You shouldn't wrap them in another container - containers are designed for a typical one-page layout. Unless it would look good / work well with your layout, you may want to look into container-fluid if you really want to do this.
tl;dr don't wrap in another container.