This time there's no grey in front of the right-justified blue block.
#How to vertically align text in bootstrap code#
Now if you save that HTML code and view it with your favorite browser, you'll see this: That's going to push the child columns to the right. Aside from row, it's using justify-content-end. This single child element only takes up 3 columns.īut note the class declarations in the parent element. That's in contrast to the previous code block that included two child elements: one that took up 9 columns and another that took up 3 columns. Look at that code carefully and you'll see there's only a single child element under the that declares the row. So the stuff on the right is at the "end."
In this part of the world, we read from left to right. That class lives up to its name by justifying the content towards the end of the flow, meaning it moves to the right. Or the other way around.Īnother option is to use the justify-content-end class. Use 10 columns on the left and 2 on the right. That's why the first child element uses 9 columns ( col-9) while the other one uses 3 columns ( col-3).īut you could mix that up. Remember: responsive design uses a 12-column layout. That makes your columns on the right appear right-aligned even though they're just filling up the space as they should. Then put the money columns on the right and add your content there. So all you need to do is just create "dummy" columns that take up the space on the left. Now if you save that HTML to a file and view it with your favorite browser, you'll see output that looks like this: You don't have to color the columns, though.
The first 9 columns are light grey while the right-most 3 columns are blue. I've color-coded the columns to make it easier to see the output. The first way is to fake the alignment by putting empty columns on the left. So you're using Bootstrap 5 to create a cool UI and now you want to align a column on the right-hand side? Sure, you can do that.Īs is usually the case, though, there are a couple of ways to do it.
0 kommentar(er)
