I want it as I shared in the picture below but I couldn't set it up. I am sharing the code I wrote below. How can I fix this problem?
my code:
#mybtn{
position: fixed;
bottom: 10px;
right: 10px;
}
<div class="row">
<div class="col-lg-8" style="position: relative;">
<p>this is my content</p>
<button id="mybtn">My Fixed Button</button>
</div>
<div class="col-lg-4">
<p>content area</p>
</div>
</div>
You can wrap button inside div and use d-flex justify-content-end on div
<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-lg-8 bg-danger">
<p>this is my content</p>
<div class='w-100 d-flex justify-content-end'>
<button id="mybtn" class='btn btn-primary btn-sm'>Button</button>
</div>
</div>
<div class="col-lg-4">
<p>content area</p>
</div>
</div>
Related
what is the best way to create a footer in Bootstrap where in the middle (horizontally) of the screen is a text with two lines and at the end of the screen (horizontally) is a text with one line, but centered vertically?
I try to create the footer with columns and offset columns - but is it the best way? Additional I don't figured out how to center the one line.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<footer class="bg-secondary py-0 mt-auto">
<div class="container-fluid px-5">
<div class="row">
<div class="col-6 offset-3 text-center">
<div class="m-0">First Line</div>
<div class="m-0">Second Line</div>
</div>
<div class="col-3 text-end">
<div class="m-0">One Line Centered</div>
</div>
</div>
</div>
</footer>
Edit:
The correct way to do this in modern browsers is to use Flexbox.
See this for details.
I'm updating my code:- [I'm adding a border in each div to clear your expectation]
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<style> div{ border: 1px solid green;} </style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<footer class="bg-secondary py-0 mt-auto">
<div class="container-fluid px-5">
<div class="row">
<div class="col-6 offset-3 text-center">
<div class="m-0">First Line</div>
<div class="m-0">Second Line</div>
</div>
<div class="col-3 text-end" style="display: table; overflow: hidden;">
<div class="m-0 text-center" style="display: table-cell; vertical-align: middle;">One Line Centered</div>
</div>
</div>
</div>
</footer>
I have a row with two cols:
a) For the name of the list
b) For an edit button.
col-md-6 works great for when the list's name is short, but when is longer it renders clunky.
Clunky:
html
<div class="row">
<div class="col-md-6">
<h1 class="box">Lista: {{ lista.name }}</h1>
</div>
<div class="col-md-6">
<button id="editList" class="btn btn-primary">Editar</button>
</div>
</div>
<hr>
It gets worse for mobiles, where the list's name should be on top of the button "Editar".
if you use bootstrap
<div class="row">
<div class="col-md-8 col-sm-6">
<h1>welcome to my blog</h1>
</div>
<div class="col-md-4 col-sm-6>
<button class="btn">hello</button>
</div>
</div>
just css
<div class="contains">
<div class="text">
<h1>welcome to my blog</h1>
</div>
<div class="button>
<button class="btn">hello</button>
</div>
</div>
<style>
.contains {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.text{
width: 60%;
}
.button{
width: 40%;
}
</style>
add (col col-md-6) not (col-md-6)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col col-md-6">
<h1 class="box">Lista: Mi Primary List</h1>
</div>
<div class="col col-md-6">
<button id="editList" class="btn btn-primary">Editar</button>
</div>
</div>
<hr>
I try to nest multiple rows in a column.
In the end it should look like
The problem is that I centered the whole thing vertically and the css rule seems to apply also on my child rows. How can I stop this alignment and make it look like I want?
Here is what I got so far:
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="row justify-content-center vertical-center">
<div class="col-auto">
<span id="field1">text</span>
</div>
<div class="col-auto">
<span id="field2">text</span>
</div>
<div class="col-auto">
<span id="field3">text</span>
</div>
<div class="col-auto">
<span id="field4">=</span>
</div>
<div class="col-auto">
<div class="row">
<div class="col">
<input type="text" id="field5"/>
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="xy">Bar</div>
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="h">Bar2</div>
</div>
</div>
</div>
</div>
</body>
</html>
Align the container instead of aligning the content. Apply your CSS to the body
body {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
<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"> <!-- this is mandatory when using row -->
<div class="row justify-content-center">
<div class="col-auto">
<span id="field1">text</span>
</div>
<div class="col-auto">
<span id="field2">text</span>
</div>
<div class="col-auto">
<span id="field3">text</span>
</div>
<div class="col-auto">
<span id="field4">=</span>
</div>
<div class="col-auto">
<div class="row">
<div class="col">
<input type="text" id="field5" />
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="xy">Bar</div>
</div>
</div>
<div class="row">
<div class="col-auto">
<div id="h">Bar2</div>
</div>
</div>
</div>
</div>
</div>
So I have this section which ocupies the whole width of the screen but the text in it is contained in a container and aligns properly.
The section below that one is divided in two columns, and im interested in putting a text in the left column that aligns with the text above it but so far have been unable to do so.
This is the result I'm getting:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="d-flex align-items-center bg-primary" style="min-height: 450px">
<div class="container">
<h1 class="">TITLE TEXT</h1>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row">
<div class="col-sm bg-secondary" style="min-height: 400px">
<div class="container">
<h3>TITLE</h3>
</div>
</div>
<div class="col-sm bg-warning" style="min-height: 400px"></div>
</div>
</div>
</section>
And the HTML I'm currently stuck with(The css was just added in the HTML for testing)
Tank you for any help provided and if you need anything more please just tell me.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-6 d-flex align-items-center">
<div class="container">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>
.text-to-center{ display:flex}
h1,h3{ margin:auto;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="">
<div class="row bg-primary" style="min-height: 450px">
<div class="col-12 d-flex align-items-center">
<div class="container text-to-center">
<h1 class="text-center">TITLE TEXT</h1>
</div>
</div>
</div>
</section>
<section id="">
<div class="subhead bg-primary">
<div class="row" style="min-height: 400px">
<div class="col-6 d-flex align-items-center bg-secondary">
<div class="container text-to-center">
<h3 class="text-center">TITLE</h3>
</div>
</div>
<div class="col-6 bg-warning"></div>
</div>
</div>
</section>
I'm trying to align a text next to an icon inside a card. The card is wrapped inside the Bootstrap "col" class which dynamically determines its size depending on how many items a row contains.
However if there isn't enough space the text gets wrapped and is displayed in a second row. Now what I'm trying to achieve is to keep the text next to the icon on one line and end it if there isn't enough space with an ellipsis (three dots).
This plunker shows my current setup
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
<div class="row mx-1">
<div class="col" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div>
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I'm trying to achieve
An idea is to make your text out of the flow using absolute position and then add some CSS properties to crop the text:
.main-title {
flex: 1;
position: relative;
}
.main-title .title {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row mx-1">
<div class="col" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
<div class="col mx-1" style="background:lightgray">
<div class="row d-flex">
<div style="width:50px;height:50px;background:gray"></div>
<div class="main-title">
<div class="title">
Long title which should end with ellipsis
</div>
</div>
</div>
</div>
</div>
</div>
You can use the text-truncate class to automatically truncate (and add ellipsis) based on the available space in a column.
To achieve that you need to put your content into columns (which you should always do anyway because putting stuff directly into a row tends to lead to problems that require unnecessary css hacks).
In the following snippet, you see a much cleaner version of your code that achieves the desired result using the text-truncate class:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.grey-div {
width:50px;
height:50px;
background:gray;
display: inline-block;
vertical-align: top;
}
</style>
<div class="container-fluid">
<div class="row mx-1">
<div class="col px-0 mx-1" style="background:lightgray">
<div class="row">
<div class="grey-div"></div>
<div>
<div class="title">
Normal title
</div>
</div>
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
<div class="col px-0 mx-1 text-truncate" style="background:lightgray">
<div class="title text-truncate">
<div class="grey-div"></div>
Long title which should end with ellipsis
</div>
</div>
</div>
</div>