Why is Bootstrap 4 text-right not working properly? - html

I want to make the text in the blue column div align on the right side just like the red div, but text-right does not seem to work. I also want the letters to keep sticking together like they do now: [I]|dashboard
This is my html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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="test.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 text-right color1setter">
test
</div>
<div class="col-md-3 text-right color2setter">
<div class="row no-gutters">
<div class="col-md-auto ">
[I]
</div>
<div class="col-md-auto ">
|
</div>
<div class="col-md-auto">
Dashboard
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>


As your auto columns have no width, they are all bunching on the left of your row - add ml-auto (margin-left: auto) class to the first auto col and it will push everything to the right:
<div class="container">
<div class="row">
<div class="col-md-3 text-right color1setter">
test
</div>
<div class="col-md-3 text-right color2setter">
<div class="row no-gutters">
<div class="col-md-auto ml-auto"> <!-- add ml-auto class here -->
[I]
</div>
<div class="col-md-auto ">
|
</div>
<div class="col-md-auto">
Dashboard
</div>
</div>
</div>
</div>
</div>
Example bootply
Bootstrap auto-margins


Colors to the background of your divs were added so as to show the group staying together, using float right for the group.
<div class="container">
<div class="row">
<div class="col-md-3 text-right color1setter" style="background-color: darkred; color: aliceblue">
test
</div>
<div class="col-md-3 text-right color2setter" style="background-color: red">
<div class="row no-gutters" style="float: right;">
<div class="col-md-auto " style="background-color: violet">
[I]
</div>
<div class="col-md-auto " style="background-color: blueviolet">
|
</div>
<div class="col-md-auto" style="background-color: purple;">
Dashboard
</div>
</div>
</div>
</div>

Related

Boostrap chat keeping message box at bottom of screen

Hi I am trying to have a row stay at the bottom of the screen for a message send input box, the problem I am having is that if I set the row:
row d-flex position-absolute bottom-0
the columns are not taking the horizontal space in the row.
here is my Boostrap 5 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" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<title>Stripe connect</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 bg-primary sidebar">
<div class="px-3 py-3"></div>
</div>
<div class="col bg-secondary">
<div class="row bg-success d-flex align-items-start flex-column vh-100">
ff
</div>
<div class="row d-flex position-absolute bottom-0">
<div class="col bg-danger">ff</div>
<div class="col">ff</div>
<div class="col">ff</div>
</div>
</div>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
and here is an image:
columns are to the left and not taking up the full width
Thanks for the help

Since you're deliberately placing the utility classes also specify the start-0 and end-0 declarations as well. Cheers
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 bg-primary sidebar">
<div class="px-3 py-3"></div>
</div>
<div class="col bg-secondary">
<div class="row bg-success d-flex align-items-start flex-column vh-100">
ff
</div>
<div class="row d-flex position-absolute bottom-0 start-0 end-0">
<div class="col bg-danger">ff</div>
<div class="col">ff</div>
<div class="col">ff</div>
</div>
</div>
</div>
</div>

Bootstrap button on right top

I have bootstrap page like this
<div class='container'>
<div class='row'>
<div class='col-sm-6 col-md-4 col-lg-3'>
<p>column1</p>
</div>
<div class='col-sm-6 col-md-4 col-lg-3'>
<p>column2</p>
</div>
<div class='col-sm-6 col-md-6 col-lg-4'>
<p>column3</p>
</div>
<div class='col-sm-2 col-md-2 col-lg-1'>
<button type="button">Button</button>
</div>
</div>
</div>
looks like this when pc
1 row
--------------------------------
|column1|column2|column3|button|
--------------------------------
but I want to change like this when Ipad
Horizontal display mode (1024px)
2 rows
--------------------------------
|column1| |button|
--------------------------------
|column2|column3|
--------------------------------
Is this possible? I tried to use pull-right, text-right, justify-content-end
but it didn't work.

Here is the pure bootstrap solution for your problem, just play with the existing classes, and I have given then BG color just for demo purpose, you can remove it. Enjoy,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class='container'>
<div class='row'>
<div class='col-xl-4 col-6' style="background-color: red">
<p>column1</p>
</div>
<div class='col-xl-1 col-6 order-xl-3 text-right text-xl-left' style="background-color: yellow">
<button type="button">Button</button>
</div>
<div class='col-xl-7 order-xl-2' style="background-color: green">
<div class="row">
<div class='col-6'>
<p>column2</p>
</div>
<div class='col-6'>
<p>column3</p>
</div>
</div>
</div>
</div>
</div>

You can change the structure as you want button and column 1 in same line and column 2 , 3 in same row as following.
<div class='container'>
<div class='row'>
<div class='col-sm-6 col-md-4 col-lg-3'>
<p>column1</p>
</div>
<div class='col-sm-2 col-md-2 col-lg-offset-8 col-lg-1'>
<button type="button">Button</button>
</div>
</div>
<div class='row'>
<div class='col-sm-6 col-md-4 col-lg-3'>
<p>column2</p>
</div>
<div class='col-sm-6 col-md-6 col-lg-4'>
<p>column3</p>
</div>
</div>

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Your title here</title>
</head>
<div class="row">
<div class="col-sm-12">
**Button**
</div>
</div>
<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>
</body>
</html>

How to make responsive break points content with bootstrap or pure css

I want to make a responsive content with bootstrap "row" and "col" class. But I got a problem how to reconstructure the content. Here's what I mean :
My current html structure is this :
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
<section id="content1">
Content 1
</section>
</div>
<div class="col-lg-4 col-md-3 col-sm-4 col-xs-12">
<section id="content2">
Content 2
</section>
</div>
<div class="col-lg-12 col-md-9 col-sm-8 col-xs-12">
<section id="content3">
Content 3
</section>
</div>
</div>
This code showing the reverse of above content (when below than 768px). so the Content 3 was Content 2 and vice versa.

You're looking to apply order to your second and third elements. Ordering is built into Bootstrap 4, so you can simply make use of the order- prefix. As such, you simply want to apply order-2 to your second <div> and order-1 to your third.
This can be seen in the following:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
<section id="content1">
Content 1
</section>
</div>
<div class="col-lg-4 col-md-3 order-2 col-sm-4 col-xs-12">
<section id="content2">
Content 2
</section>
</div>
<div class="col-lg-12 col-md-9 order-1 col-sm-8 col-xs-12">
<section id="content3">
Content 3
</section>
</div>
</div>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-12">
Div 1
</div>
<div class="col-md-12 col-sm-8 order-md-4 order-sm-1">
Div 3
</div>
<div class="col-md-4 col-sm-4 order-sm-2">
Div 2
</div>
</div>
</div>
</body>
</html>
Change the visual order of specific flex items with a handful of order utilities. Bootstrap provides options for making an item first or last, as well as a reset to use the DOM order.
https://getbootstrap.com/docs/4.0/utilities/flex/
Check this link for reference

bootstrap 4 using float-right got vertical issues

I have comments section on my template, I use w-75 float-right but other column got pull to my comment side.
here my template code.
<div class="col-md-12 mb-3">
....
<!-- comments with no parrent -->
<div class="card mb-3">
<div class="card-body">
....
</div>
</div>
<!-- comments with parrent -->
<div class="card mb-3 w-75 float-right">
....
</div>
<br>
</div>
<!-- comments Form -->
<div class="col-md-12 mb-5">
....
</div>
I wan't like this

Instead of
<div class="card mb-3 w-75 float-right">
Set the left margin to auto, this will push this div element all the way to the right and leave the area to its left clear.
Like this:
<div class='card mb-3 w-75 ml-auto">

You'll want to add .row classes to force a new line, and ensure that each row has exactly 12 columns. To adhere to this, you'll want to remove your w-75 class, and change the parent to col-md-7 in conjunction with offset-md-5 (this totals 12). This allows your card to be offset on desktop screens (with no elements forcing their way in on the left) and stack correctly on mobile screens.
This can be seen in the following (click Run code snippet and then Full page to see the offset):
body {
margin: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-12 mb-3">
....
</div>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<!-- comments with no parent -->
<div class="card mb-3">
<div class="card-body">
....
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 offset-md-5">
<!-- comments with parent -->
<div class="card mb-3">
<div class="card-body">
....
</div>
</div>
<br>
</div>
</div>
<div class="row">
<!-- comments Form -->
<div class="col-md-12 mb-5">
....
</div>
</div>

How to align button to right in bootstrap 4

I tried looking this up here but I can't find anything related to this specific problem.
I'm trying to make a header which has a button on the left and right of the screen with a logo in the middle, but whenever I make the window smaller or larger the button on the right doesnt stay aligned.
Small window
Large window
Here is the code:
<header>
<div id="container-fluid">
<div class="row">
<div class=" col-2">
Menu
</div>
<div class="col-8 text-center ">
Logo
</div>
<div class="col-2 float-right">
Contact
</div>
</div>
</div>
</header>
What am I missing here?
Thanks in advance.
Fixed it, code now looks like this:
<body>
<header>
<div id="container-fluid">
<div class="row">
<div class="col">
<span class="float-left">Menu</span>
</div>
<div class="col text-center">
Logo
</div>
<div class="col">
<span class="float-right">Contact</span>
</div>
</div>
</div>
</header>
</body>

wrap your content so it can be aligned according to the parent container.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<header>
<div id="container-fluid">
<div class="row">
<div class="col-2">
<span class="float-left">Menu</span>
</div>
<div class="col-8 text-center">
Logo
</div>
<div class="col-2">
<span class="float-right">Contact</span>
</div>
</div>
</div>
</header>

You can use the flex-bootstrap-class and justify-content for this approach:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row d-flex justify-content-between bg-light">
<div class="p-2 bg-dark text-light">
Menu
</div>
<div class="p-2 bg-dark text-light">
Logo
</div>
<div class="p-2 bg-dark text-light">
Contact
</div>
</div>
</div>

You havn't defined what size of column grid you are using. Using col-xs,col-sm, col-md,col-lg will have different effects for the particular code. Run the snippet code in full page below and see how the col-size affects when the browser is resized.
Update - Bootstrap 4 has replaced the col-xs with col- .
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="container-fluid">
Col:xs
<div class="row">
<div class=" col-2">
Menu
</div>
<div class="col-8 text-center ">
Logo
</div>
<div class="col-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:sm
<div class="row">
<div class=" col-sm-2">
Menu
</div>
<div class="col-sm-8 text-center ">
Logo
</div>
<div class="col-sm-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:md
<div class="row">
<div class=" col-md-2">
Menu
</div>
<div class="col-md-8 text-center ">
Logo
</div>
<div class="col-md-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:lg
<div class="row">
<div class=" col-lg-2">
Menu
</div>
<div class="col-lg-8 text-center ">
Logo
</div>
<div class="col-lg-2 float-right">
Contact
</div>
</div>
</div>