I would like to horizontally align some code and a button.
For that, I am using the following code:
<div className="panel-heading">
<h2 className="panel-title headingText">Attributes</h2>
<button type="button" className="btn btn-info btn-sml pull-right" data-toggle="modal" data-target="#newListModal">New List</button>
</div>
However, the two are not aligned(the button is the blue thing at the bottom, I would like it to be more central, just like the text):
How could I align the text and button horizontally?
You can apply Css to fulfill your requirement like this
.panel-heading, .headingText
{
display:inline-block;
padding:10px;
}
<div classname="panel-heading">
<h4 classname="panel-title headingText" style="float:left">Attributes</h4>
<button type="button" style="float:left;padding:10px" classname="btn btn-info btn-sml pull-right" data-toggle="modal" data-target="#newListModal">New List</button>
</div>
This should Work. You can remove padding property
Related
I have the following code
<div class="modal-footer">
<div class="pagination">
</div>
<button type="button" onClick={$("#error-text").hide()} class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
where the HTML for the pagination class is set later. This gives me something that looks like this in my modal
Howeer I want the close button to appear below the other elements. I am wondering how to achieve this in CSS, I have already tried using another to contain the button as well as style:block
one of the best ways to do this is flexbox. I highly recommend learning it.
<div class="modal-footer">
<section class="pagination">
<span>1 2 3</span>
<div>
<button>
next
</button>
<button>
last
</button>
</div>
</section>
<button type="button" onClick={$("#error-text").hide()} class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
CSS :
.pagination{
display:flex;
gap:10px;
}
.modal-footer{
display:flex;
flex-direction:column;
align-items : flex-start;
justify-content:center;
gap:10px
}
You could try using to insert a line break in the HTML:
<div class="modal-footer">
<div class="pagination">
</div>
<br><button type="button" onClick={$("#error-text").hide()} class="btn btn-secondary" data- dismiss="modal">Close</button>
As based on my example below, how can I make <div id="full"> take the full width of the parent and have the 3 buttons inside share this width and have the same sizes with gaps between them?
?
Is there a Bootstrap class that can do that?
<script src=https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js integrity=undefined crossorigin=anonymous></script>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css integrity=undefined crossorigin=anonymous>
<div class="d-grid gap1">
<div id="full">
<button type="button" class="btn btn-success">shared width button</button>
<button type="button" class="btn btn-success">shared width button</button>
<button type="button" class="btn btn-success">shared width button</button>
</div>
<button type="button" class="btn btn-primary">full width button</button>
</div>
You can use Bootstrap flex to achieve this.
Add the d-flex class to the parent container of the buttons, then flex-fill to each button. You can also use the spacing classes to add gutters between the buttons and the following content.
<script src=https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js integrity=undefined crossorigin=anonymous></script>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css integrity=undefined crossorigin=anonymous>
<div class="d-grid gap1">
<div id="full" class="d-flex mb-1">
<button type="button" class="btn btn-success flex-fill me-1">shared width button</button>
<button type="button" class="btn btn-success flex-fill me-1">shared width button</button>
<button type="button" class="btn btn-success flex-fill">shared width button</button>
</div>
<button type="button" class="btn btn-primary">full width button</button>
</div>
you can use custom class for #full:
.custom-flex {
display:flex;
gap:30px; /* custom gap */
}
.custom-flex > * {
flex:1; /* add full width for children */
}
I'm trying to create a list of links with a button pulled to the right of each link. The issue is that the button gets wrapped to the next line on a small screen when the link is very large. I would like the link to take up all the space left after the button and not wrap to the next line. Preferably I would like the link to be displayed as a btn as well but figured that was innescessary for the question.
Here's an example: jsfiddle
<div class="row">
<div class="col-sm-6">
<p>
link1
<button class="btn btn-primary btn-xs pull-right">Button</button>
</p>
<p>
link2
<button class="btn btn-primary btn-xs pull-right">Button</button>
</p>
<p>
very long link that pushes the button to next line
<button class="btn btn-primary btn-xs pull-right">Button</button>
</p>
<p>
link4
<button class="btn btn-primary btn-xs pull-right">Button</button>
</p>
<p>
link5
<button class="btn btn-primary btn-xs pull-right">Button</button>
</p>
</div>
</div>
I've tried every no-wrap property and changing the width of the p's but nothing seems to work and I'm now stumped. Also if anyone has any insight into why changing the p elements to div elements messes up the layout that would be appreciated.
I take it you're looking to conditionally apply ellipsis based on whether there's enough space to display the full text or not.
First, you need to apply your standard three ellipsis rules:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Then you'll need to set display: inline-block so that the overflow (and subsequent ellipsis) can take effect, without messing up the layout.
Finally, and most importantly, you'll want to set a calculation-driven max-width by using the calc() function. Set a width of 100%, and subtract the width of the button from it. In this case, you're looking for max-width: calc(100% - 47px). The magic is that as you resize the page, the inherited width will change, yet you'll still leave enough space for the button. This results in the full text being shown when it's possible to do so, and ellipsis being added when it is not possible.
This can all be seen in the following:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.no-deco,
.no-deco:link,
.no-deco:visited {
text-decoration: none;
color: darkslategray;
}
.no-deco:hover,
.no-deco:active {
text-decoration: none;
color: darkgray;
}
.no-deco {
max-width: calc(100% - 47px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>
<a class="no-deco" href="#">link</a>
<button class="btn btn-primary btn-xs pull-right">Button</button>
</p>
<p>
<a class="no-deco" href="#">link</a>
<button class="btn btn-primary btn-xs pull-right">Button</button>
</p>
<p>
<a class="no-deco" href="#">very long link that pushes button to next line</a>
<button class="btn btn-primary btn-xs pull-right">Button</button>
</p>
<p>
<a class="no-deco" href="#">link</a>
<button class="btn btn-primary btn-xs pull-right">Button</button>
</p>
<p>
<a class="no-deco" href="#">link</a>
<button class="btn btn-primary btn-xs pull-right">Button</button>
</p>
</div>
</div>
</div>
This can also be seen here.
I have a btn-toolbar inside my panel-body, and would like to:
Center the set of buttons
Ensure that on mobile view, three buttons are on top, three are on the bottom.
There are a lot of similar questions out there, and I have tried various potential solutions, but nothing seems to work (text-align: center, margin: 0 auto, etc.). Any help would be appreciated.
http://codepen.io/kli96/pen/vydMgW
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar">
<button type="button" class="btn btn-primary" id="btn2016">2016</button>
<button type="button" class="btn btn-primary" id="btn2015">2015</button>
<button type="button" class="btn btn-primary" id="btn2014">2014</button>
<button type="button" class="btn btn-primary" id="btn2013">2013</button>
<button type="button" class="btn btn-primary" id="btn2012">2012</button>
<button type="button" class="btn btn-primary" id="btn2011">2011</button>
<button type="button" class="btn btn-primary" id="btn2010">2010</button>
</div>
</div>
</div>
</div>
</div>
</div>
To make sure the buttons are centers you can set the container of the buttons to display: inline-block and that container with text-align: center.
You have 7 buttons, but with the above changes they look ok on mobile.
Here is the CSS you need:
.panel-body {
text-align: center;
}
.btn-toolbar {
display: inline-block;
}
.btn-toolbar .btn {
margin-bottom: 5px;
}
Check the codepen:
http://codepen.io/anon/pen/MbQRrY
I can't figure out how to center align a vertical button group with text in bootstrap, in a single div.
I'll will be grateful if someone throws me an idea on how to approach this.
Here are some images illustrating what I mean
Text on one side of button group:
And on both sides:
Check the example code at CODEPEN
<div class="box">
<span>First Text</span>
<div aria-label="Vertical button group" role="group" class="btn-group-vertical"> <button class="btn btn-default" type="button">Button</button> <button class="btn btn-default" type="button">Button</button>
<button class="btn btn-default" type="button">Button</button>
</div>
<span>Second Text</span>
</div>
I hope this helps you.
Enjoy :)