I am using twitter bootstrap. Here is my code:
<div class="control-label">
We
<div class="btn-group">
<a href="javascript:;" data-toggle="dropdown" class="btn dropdown-toggle">
<span>search</span> <span class="caret"></span>
</a>
</div>
Something
</div>
http://jsfiddle.net/3j7QP/
How can I make the texts and the button appear in one line aligned to the left using thw twitter bootstrap classes?
Classes only
Btn toolbar
If you want to stick strictly to classes, you can try .btn-toolbar but you won't have the vertical alignment.
Demo btn-toolbar
<div class="control-label btn-toolbar">
<!-- ... -->
</div>
Floating
Floating doesn't seem to be an appropriate solution because you loose the line continuity. So you shouldn't use .pull-left.
CSS
Otherwise there are several solutions :
No btn-group
First of all you could remove the div.btn-group since apparently you are not using it.
Demo no div
Inline blocks
Or you could use display: inline-block; on all elements (but you should enclose text in blocks).
Demo inline blocks
.myClass > div {
vertical-align: middle;
display: inline-block;
}
<div class="control-label myClass">
<div>We</div>
<div class="btn-group"><!-- ... --></div>
<div>Something</div>
</div>
Related
This button-group just doesn't want to be aligned. I've tried to add pull-right, text-right, float-right bootstrap classes to btn-group div. I've tried to change text-align, padding, margin, float css properties for buttons class. Nothing helps. Only if I set padding-left value like padding-left: 28px. But that's not what I'm looking for. I need a solution for general case but not to experiment with how much pixels needed for padding-left value.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row issue">
<div class="title col-md-7">
Google
</div>
<div class="buttons btn-group col-md-5">
<button class="btn btn-success btn-sm">PR</button>
<button class="btn btn-danger btn-sm">DEL</button>
</div>
</div>
bootstrap 4
<div class="text-right">
<div class="buttons btn-group col-md-5">
<button class="btn btn-success btn-sm">PR</button>
<button class="btn btn-danger btn-sm">DEL</button>
</div>
</div>
Bootstrap by default applies float:left to buttons in a button group. But overwriting that with float:right works perfectly fine ... but than you will have the effect of the elements showing up in reverse order.
If you don’t want that, you can set float: none - and use text-align on the parent element to align the inline buttons.
.buttons { display: block; text-align: right; }
.buttons .btn { float: none; }
https://jsfiddle.net/Lhfhaa2a/1/
I added display:block for the parent element as well here, so that it takes the full width on smaller screen resolutions, too (it originally has display: inline-block set, but that would make it as wide as its content requires only - and if it is only as wide as the buttons make it, you can’t “align” them to either side any more.)
flex is the best way:
<div style="display:flex">
<div> <button>PR</button></div>
<div> <button>DEL</button></div>
</div>
This aligns the buttons. You can play around this. Do you want spaces? aligned right?
The flexbox method is superior to the float method, which might cause unwanted side-effects.
Bootstrap v5
<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"/>
<div class='row g-0'>
<div class='col-md-5 w-auto ms-auto'>
<button class="btn btn-success btn-sm">PR</button>
<button class="btn btn-danger btn-sm">DEL</button>
</div>
</div>
Bootstrap v4.6.0:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"/>
<div class='row no-gutters'>
<div class='col-md-5 w-auto ml-auto'>
<button class="btn btn-success btn-sm">PR</button>
<button class="btn btn-danger btn-sm">DEL</button>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8">
<div v-for="job in job">
<div class="text-center">
<h1>{{ job.job_title }}</h1>
<p><strong>Google Inc. </strong> - {{ job.location }}</p>
<h2><u>Job Description</u></h2>
</div>
<p v-html="desc"></p>
<p class="text-center">Posted: {{ formatDate(job.date_created) }}</p>
<button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button>
</div>
</div>
<div class="hidden-sm-down col-md-4"></div>
</div>
</div>
Can't figure out how to center this button. In BS 3 I would just use center-block but that's not an option in BS4. Any advice?
In Bootstrap 4 one should use the text-center class to align inline-blocks.
NOTE: text-align:center; defined in a custom class you apply to your parent element will work regardless of the Bootstrap version you are using. And that's exactly what .text-center applies.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col text-center">
<button class="btn btn-default">Centered button</button>
</div>
</div>
</div>
If the content to be centered is block or flex (not inline-), one could use flexbox to center it:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="d-flex justify-content-center">
<button class="btn btn-default">Centered button</button>
</div>
... which applies display: flex; justify-content: center to parent.
Note: don't use .row.justify-content-center instead of .d-flex.justify-content-center, as .row applies negative margins on certain responsiveness intervals, which results into unexpected horizontal scrollbars (unless .row is a direct child of .container, which applies lateral padding to counteract the negative margin, on the correct responsiveness intervals). If you must use .row, for whatever reason, override its margin and padding with .m-0.p-0, in which case you end up with pretty much the same styles as .d-flex.
Important note: The second solution is problematic when the centered content (the button) exceeds the width of the parent (.d-flex) especially when the parent has viewport width, specifically because it makes it impossible to horizontally scroll to the start of the content (left-most).
So don't use it when the content to be centered could become wider than the available parent width and all content should be accessible.
Try this with bootstrap
CODE:
<div class="row justify-content-center">
<button type="submit" class="btn btn-primary">btnText</button>
</div>
LINK:
https://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content
With the use of the bootstrap 4 utilities you could horizontally center an element itself by setting the horizontal margins to 'auto'.
To set the horizontal margins to auto you can use mx-auto . The m refers to margin and the x will refer to the x-axis (left+right) and auto will refer to the setting. So this will set the left margin and the right margin to the 'auto' setting. Browsers will calculate the margin equally and center the element. The setting will only work on block elements so the display:block needs to be added and with the bootstrap utilities this is done by d-block.
<button type="submit" class="btn btn-primary mx-auto d-block">Submit</button>
You can consider all browsers to fully support auto margin settings according to this answer Browser support for margin: auto so it's safe to use.
The bootstrap 4 class text-center is also a very good solution, however it needs a parent wrapper element. The benefit of using auto margin is that it can be done directly on the button element itself.
Here is the full HTML that I use to center by button in Bootsrap form
after closing form-group:
<div class="form-row text-center">
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
Use text-center class in the parent container for Bootstrap 4
for a button in a collapsed navbar nothing above worked for me
so in my css file i did.....
.navbar button {
margin:auto;
}
and it worked!!
thing is you need to wrap your button in a parent element :
` <div class="text-center">
<a href="./templatemo_558_klassy_cafe/index.html" class="btn btn-
outline-light me-5 ">Lavande Restaurant PH</a>`
</div>
What worked for me was (adapt "css/style.css" to your css path):
Head HTML:
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
Body HTML:
<div class="container">
<div class="row">
<div class="mycentered-text">
<button class="btn btn-default"> Login </button>
</div>
</div>
</div>
Css:
.mycentered-text {
text-align:center
}
you can also just wrap with an H class or P class with a text-center attribute
Its Easy
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-primary">
Click Me!
</button>
</div>
I have two rows in contianer.
Now i am trying to interchange one grid element with the other in mobile layout.
But i am not able to get how to interchange for only specfic case as both are in two different rows classes.
For the Desktop app
For the Mobile Layout currently it is showing as
Actually i want the layout to realign only 3rd grid to come above as shown in picture below.
For the refernce i am attaching jsfiddle of the same. LINK
HTML Code :
<div class="container">
<div class="container">
<div id="graphArea" class=" row" >
<div class="col-lg-4 col-md-4">
<span class="label label-warning"><span class="badge">1:</span> First </span>
</div>
<div id="rightgrid" class="col-lg-6 col-md-6">
<span class="label label-warning"><span class="badge">2:</span> Second </span>
</div>
<div id="extright" class="col-lg-1 col-md-1">
<span class="label label-warning"><span class="badge">4:</span> Fourth </span>
</div>
</div>
<div class="row borderbottom">
<div id="inputDiv" class="col-md-6">
<span class="label label-warning"><span class="badge">3:</span> Thrid</span>
</div>
<div>
CSS Code:
.borderbottom
{
border: 2px solid #999;
margin-top:5px;
margin-bottom: 5px;
}
Please let me know the current problem work around or guide me with ways i can do it.Thanks
you can copy the sections and add visible and hidden classes to them
like in this fiddle
.hidden-xs, .visible-xs-inline-block
for better usage, you can use nginclude (if you use angularjs) to avoid duplicate html and specify bootstrap grid-float-breakpoint (if you use boostrap sass) for better visible/hidden handling.
I'm building a webpage, the landing page has two portals. I would like to use jombotrons to be used as the portals. I would like to have two jumbotrons side by side. I thought if I put them inside a row div, and gave them col-mid-6 class this would give me the desired affect. However, they just span across the page, and then stack. Any help would be very much appreciated. I'm very new to css and bootstrap.
<div class="row">
<div class="container">
<div class="jumbotron text-center col-mid-6">
<h1>Become Awesome</h1>
<p>Here you will learn how to become awesome.</p>
<a class="btn btn-danger pull-right" href="{% url 'awesome_info' %}">More Info</a>
</div>
<div class="jumbotron text-center col-mid-6">
<h1>Here you will learn how to become super rad.</h1>
<p>Tubular dude.</p>
<a class="btn btn-success" href="{% url 'rad_info' %}" role="button">More Info</a>
</div>
</div>
</div>
The correct class is col-md-6.
With that your jumbotron will be equal widths like in here
If you want the height to be equal too, give your container class a css property such as:
.container{
display: flex
}
For the result to be like this
You have a typo in your divs. Bootstrap calls for a col-md-6 class, not a col-mid-6 class.
<div class="jumbotron text-center col-md-6"></div>
You should put your div.container into a div.row then, write this css property
.container{
display: flex
}
Problem
I want to be able to use btn group for twitter bootstrap and have the buttons show to the left of some text. Not sure if this is already available in twitter bootstrap or if I need to add some css.
What I Have
I currently have a btn-group defined with two buttons. I then have after the buttons a string of text.
<p>
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-small">BTN Text 1</div>
<div class="btn btn-small">BTN Text 2</div>
</div>
String to display after buttons on same line
</p>
What I have tried
I have tried a few things here. I modified the <p> tag to be a <div class="row"> with two span divs one for the buttons and one for the text but this did not work. I also tried the following:
<div>
<div class="btn-group inline" data-toggle="buttons-checkbox">
<div class="btn btn-small">BTN Text 1</div>
<div class="btn btn-small">BTN Text 2</div>
</div>
<span class="inline">String to display after buttons on same line</span>
</div>
and defined in the css .inline {display:inline-block; zoom:1; *display: inline;} However this did not work either. This is what I am getting. As you can see the text is displaying below the button group. I want the text to the right of the button group.
Question
What can I do to get the button group to display to the right of the string? Is there something already built into twitter bootstrap for this, if so what? If not, was I on the right track of creating an inline class, if this is the case, why did it not work?
Update
Thank you RichardTowers for the suggestion on the pull-left class on the button group. However when adding more sets (which is needed) I get the following:
I assume that this is because of floating. Is this correct and how would I fix it?
Put pull-left on the buttons div: http://jsfiddle.net/dbTqC/653/
I think this just sets float: left, so you'll need to clear things below it. There's a clearfix class for this.
It's worth having a look at some CSS resources so that you understand what's happening here.
<p class="btn-toolbar">
<span class="btn-group">
Button 1
</span>
<span class="btn-group">
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
</span>
<span class="btn-group">Text here.</span>
</p>
This works:
<p>Hello <span class="btn-group">...</span></p>
I did as suggested in this SO answer, so basically I started off of .navbar .brand style and adapted a little bit.
If interested, here is my changed style:
/* See .navbar .brand style in bootstrap.css for a reference */
.btn-toolbar .title {
display: block;
float: left;
margin-top: -4px; /* Recover part of margin set in child Header nodes */
margin-left: 10px;
font-size: 20px;
font-weight: 200;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
}
HTML usage:
<div class="btn-toolbar">
<div class="btn-group pull-left">
<a class="btn" href="#/search">Search...</a>
</div>
<div class="title">
<h4>View offers</h4>
</div>
<div class="btn-group pull-right">
<a class="btn" href="#/batchDelete">Delete ...</a>
<a class="btn" href="#/new">New</a>
</div>
</div>
and end result: