This question already has answers here:
Flexbox - Justify left and right on the same line
(4 answers)
CSS to keep two DIVs left and right?
(6 answers)
Left align and right align within div in Bootstrap
(7 answers)
Closed 1 year ago.
I want to display my previous button and next button sit on the same line, how do I fix it ? My button currently sit like this
<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">
<div class="col-md-12 text-left">
<button type="button" id="pre_button" class="btn btn-md btn-primary ml-2 button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="previous">Previous</button>
</div>
<div class="col-md-12 text-right">
<button type="button" id="next_button" class="btn btn-md btn-primary ml-2 button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="Next">Next</button>
</div>
Use float css rule
.f-l {
float: left;
}
.f-r {
float: right;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 text-left f-l">
<button type="button" id="pre_button" class="btn btn-md btn-primary ml-2 button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="previous" >Previous</button>
</div>
<div class="col-md-12 text-right f-r">
<button type="button" id="next_button" class="btn btn-md btn-primary ml-2 button-icon rounded-small" data-toggle="tooltip" data-placement="top" title="Next" >Next</button>
</div>
Related
I am trying to make a simple example where I have a row and inside that row is columns. One column is for the name of the left-hand side and on the right-hand side is the three buttons that exist. However, I am having issues placing the buttons properly on the right side as well as spacing them at an appropriate distance. I tried using the max-width in my CSS but I just ended up screwing up the project even more. Below is my HTML/CSS file:
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div>
<h4> Group Pattern Test</h4>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Save</button>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Close</button>
</div>
<div class="ml-auto">
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
You would want to use a btn-toolbar to group your buttons in-line.
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
This question has been answered well here. But here's an example below, add float-right class to your button bar, you can put a breakpoint in the class like float-sm-right but float-right works on any viewport width.
#submitGPBtn {
margin-right: 30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar float-right">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
In bootstrap ml-auto is fine to align buttons to the right, but you should apply it only to the first item after the "offset".
I added ml-1 to space the other buttons and a lightyellow background just to show where the container ends.
My personal suggestion when you use bootstrap is to code inside a container, you can't set its size to what you want but it prevents stretching in wide monitors.
.container {
background-color: lightyellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col text-left">
<h4> Group Pattern Test</h4>
</div>
<button class="btn btn-success ml-auto">Save</button>
<button class="btn btn-success ml-1">Close</button>
<button class="btn btn-success ml-1" id="submitGPBtn">Submit</button>
</div>
</div>
I'm removing most <br> from my HTML and trying to replace it with CSS. I've tried several techniques but none on them worked for me, what am I doing wrong ?
Using Bootstrap 4, I've try adding the class d-block to my elements (h1 and the following div),
I've tried adding margin/padding bottom with CSS,
or, as in Bootstrap documentation, embed it into <span> and add the same classes (d-block p-2)
I've also tried adding CSS to <h1>, such as :
.h1 {
width: 100%;
display: block;
padding-bottom: 10px;
}
.h1::after {
content: '\A';
white-space: pre;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<h1 class="d-block">Portfolio</h1>
<!-- Mosaic buttons -->
<div class="d-block">
<button class="btn btn-outline-light filter-button mr-2" data-filter="all">ALL</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="demo">SOUND DESIGN</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="album">MUSIC</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="samplepack">SAMPLEPACKS</button>
</div>
On StackOverflow, the snippet works fine, but here's the result I've locally (can't manage to reproduce it here)
I'm expecting the buttons to sit under the <h1> tag (instead of on its right)
Here's the website before I remove all the (slow and bugged) : https://staging-det-music.herokuapp.com/
If anyone is interested, the git repo: https://gitlab.com/kawsay/det
What am I missing ? Any help would be gratefully received !
if you want to display buttons in column
<div class="d-flex flex-column">
<h1>Portfolio</h1>
<button class="btn btn-outline-light filter-button mr-2" data-filter="all">ALL</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="demo">SOUND DESIGN</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="album">MUSIC</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="samplepack">SAMPLEPACKS</button>
</div>
if you want to display buttons next to each other
<div class="d-flex flex-column">
<h1>Portfolio</h1>
<div class="d-flex flex-row">
<button class="btn btn-outline-light filter-button mr-2" data-filter="all">ALL</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="demo">SOUND DESIGN</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="album">MUSIC</button>
<button class="btn btn-outline-light filter-button mr-2" data-filter="samplepack">SAMPLEPACKS</button>
</div>
I want display a button to the center of the row, having on the same line a text aligned to the left:
<div class="col-xs-1">
<div class="card-header">
<h4 class="card-title">set</h4>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary center-block add-option" id="add-option">test</button>
</div>
</div>
The problem is that I got this result: https://jsfiddle.net/DTcHh/96757/
Bootstrap has tons of classes to play with.
One of possible solutions:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid card-header btn-group">
<h4 class="card-title">set</h4>
<div class="text-center container">
<button type="button" class="btn btn-primary center-block add-option" id="add-option">test</button>
</div>
</div>
I'm trying to wrap or resize text inside bootstrap button without changing button size.I have couple buttons that must be aligned
I've used this class,text is wrap but button grows in size affecting the alignment with other buttons
.btn-wrap-text {
white-space: normal !important;
word-wrap: break-word !important;
}
There is sample code,just resize the view:
https://jsfiddle.net/mrapi/3yv314dx/1/
thanks
Not sure why all the complicated solutions.
Just add the following to your .btn css:
white-space: normal;
So, if you already have a .btn in your global css file, do this:
.btn {
white-space: normal;
}
Or if you do not have anything in your global css file, just do it inline, such as:
<button type="button" class="btn btn-primary" style="white-space: normal;">This is some button with text that should wrap</button>
Note: This method may not work on archaic versions of IE
Here you go with a solution https://jsfiddle.net/3yv314dx/3/
$('[data-toggle="tooltip"]').tooltip();
.btn-outline {
background-color: transparent;
color: inherit;
transition: all .5s;
}
.btn-wrap-text {
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE WITH LONGER NAME
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE WITH LONGER NAME
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline btn-wrap-text" data-toggle="tooltip" title="ARTICLE WITH LONGER NAME">
ARTICLE WITH LONGER NAME
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
<div class="col-sm-4 col-md-4">
<button class="btn btn-success btn-sm btn-block btn-outline">
ARTICLE
</button>
</div>
</div>
</div>
</div>
Here in the solution, I've used ellipse to truncate extra characters & to show entire text used tooltip
You can change the font size. If you dont want to change the font size use the below code
.btn-wrap-text {
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
}
I've written some code that makes a menu. I've used bootstrap to manage this.
My problem is they show different behaviour on different computers:
This is the html code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" id="createStoryBox"><span class="glyphicon glyphicon-book" style="display: inline-block"></span><span class="hidden-xs hidden-sm"style="display: inline-block"> {{ _('Create story') }}</span></button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#createEventModal" style="display: inline-block" ><span class="glyphicon glyphicon-flag"></span><span class="hidden-xs hidden-sm"> {{ _('Create event') }}</span></button>
</div>
Behviour 1
Behaviour 2