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.
Related
In Bootstrap 5 I would like to achieve reordering columns between desktop and mobile like on this picture
I have tried the order classes and workaround with position: absolute, but that does not work as I would like to.
I also found there was somebody trying to achieve the same, but probably with old bootstrap and without a satisfying solution (I would like to avoid float). Also, green plus red part can have higher height than blue one.
The simple code without reordering is here:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-12 col-xxl-6">
<div style="height:20px; background-color:green;"></div>
</div>
<div class="col-12 col-xxl-6">
<div style="height:60px; background-color:blue;"></div>
</div>
<div class="col-12 col-xxl-6">
<div style="height:40px; background-color:red;"></div>
</div>
</div>
You can use the display: flex property, in bootstrap it would be the classes with.flex- *
https://getbootstrap.com/docs/5.0/utilities/flex/
and to better understand how the display: flex works
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can do this by duplicating the green section using different .d-* display utility classes. The first instance should be hidden above the breakpoint with .d-xxl-none and the second instance should be hidden below the breakpoint with .d-none and shown above with .d-xxl-block:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-12 col-xxl-6 d-xxl-none">
<div style="height:20px; background-color:green;"></div>
</div>
<div class="col-12 col-xxl-6">
<div style="height:60px; background-color:blue;"></div>
</div>
<div class="col-12 col-xxl-6">
<div class="d-none d-xxl-block" style="height:20px; background-color:green;"></div>
<div style="height:40px; background-color:red; "></div>
</div>
</div>
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.
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>
I have a logo that I want place it in right of my container in first row. First I wrote this code:
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="../Images/logo.png" alt="Logo"/>
</div>
<div class="col-md-9">
</div>
</div>
</div>
and the logo IS shown in left side of first row with some margins. Now I add pull-right class to my div like this:
<div class="col-md-3 pull-right">
<img src="../Images/logo.png" alt="Logo"/>
</div>
and the logo aligns to right side of the browser window without any margins. How I place logo on right side of first row like left side?
Thanks
If you want to pull the image to the right you need to pull the image, not the row:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<img src="../Images/logo.png" alt="Logo" class="pull-right"/>
</div>
<div class="col-xs-6">
Column 2
</div>
</div>
</div>
If you want to the columns to switch places without changing the order of the <div>s you should use .col-*-pull-* and .col-*-push-*. They will respect the column gutters:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-push-6">
<img src="../Images/logo.png" alt="Logo"/>
</div>
<div class="col-xs-6 col-xs-pull-6">
Column 2
</div>
</div>
</div>
You can of course combine the two as well.
(By the way, don't set the alt-text to "Logo" in your final design, set it to something useful, like the company name).
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.