I'm using bootstrap's class
<div class="btn-group btn-group-justified">
Buttons are perfect the way they are (I need them equally spaced and taking full length) but I would like a little space between them. I tried playing around with margins, width percentage and padding with no success.
Please see this codepen http://codepen.io/crhistian/pen/WwyWYM?editors=0100
HTML
<div class="panel-footer">
<div class="row">
<div class="col-xs-2">
<div class="row custom-row">
<div class="col-md-6">
<button class="btn btn-info btn-block">Cart</button>
</div>
<div class="col-md-6">
<button class="btn btn-success btn-block">Checkout</button>
</div>
</div>
</div>
</div>
</div>
CSS
.custom-row {
margin-left: -5px;
margin-right: -5px;
}
.custom-row .col-md-6 {
padding-left: 5px;
padding-right: 5px;
}
For the first button in the div tag
.btn-group {
float: left;
width: 45%;
}
And for your other button (add "2" to the other buttons div tag class):
.btn-group2 {
float: right;
width: 45%;
}
Then you can add margins for the same classes if you want to position them better
Related
I am trying to create two div elements floating side by side in the middle of the screen horizontally and vertically. But they are not getting displayed accurately.
here's the visual
Image 1
Image 2
Here's my HTML
<div id="config">
<button class="echo-test-button" id="connect" ng-click="connect()">
Connect
</button>
<button class="echo-test-button" id="disconnect" ng-click="disconnect()">
Disconnect
</button>
<strong> Message</strong>
<input type="text" ng-model="message" maxlength="40" placeholder="Enter Message Here" ng-disabled="isConnected"/>
<button class="echo-test-button" id="sendMessage" ng-click="sendMessage(message)" ng-disabled="isConnected">
Send
</button>
</div>
<div id="log">
<strong>Log</strong>
<div id="consoleLog">
</div>
<button class="echo-test-button" id="clear" ng-click="clearLog()">
Clear
</button>
</div>
CSS File
#cofig{
float: left;
}
#log{
float: left;
margin-left: 20px;
padding-left: 20px;
width: 350px;
border-left: solid 1px #cccccc;
}
You have a width on your #log div but not on your #cofig div. This is going to mean that your #cofig div is going to take up 100% of the width.
Try making each of your divs have a width of 50%, or slightly less if you have margins/padding.
Try with flex, get the two elements, delete that css, and put this:
.contenedor{
display:flex;
flex-wrapper:nowrap;
}
.config{
background-color:red;
}
.log{
background-color:blue;
}
.config, .log{
padding:25px;
}
<div class="contenedor">
<div class="config">
lorem ipsum
</div>
<div class="log">
lorem ipsum
</div>
</div>
And from that, do whatever you want.
Hope it works for you!
TB3 here. Here is the respective jsFiddle. I am trying to build a little minitron (mini jumbotron) that has the following layout:
As you can see, there is a main <div> given the minitron class. Each 'minitron' has:
An icon (Glyphicon)
A name
A description
A 'Learn More' button
Unfortunately my CSS-fu is pretty weak, and as you can see in that fiddle, I'm just not achieving the desired layout.
Here's my attempt at some CSS rules:
.minitron-icon {
width:20%;
height: 20%;
margin: 5px;
}
.minitron-name {
font-size: 18px;
}
.minitron-desc {
width: 80%;
margin: 5px;
}
.minitron-learnmore {
width: 95%;
}
Can anyone spot where I'm going awry?
What about this one? https://jsfiddle.net/oh69hq71/17/
Taking advantage of BS grid system using rows and columns. The first row containing the glyphicon and name/description, the other one with the learn more full width.
<div class="well minitron">
<div class="row">
<div class="col-xs-2">
<span class="glyphicon glyphicon-piggy-bank minitron-icon"></span>
</div>
<div class="col-xs-10">
<div class="row">
<span class="minitron-name">Some Name</span>
</div>
<div class="row">
<span class="minitron-desc">A short meaningful description goes here.</span>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="minitron-learnmore btn btn-success" type="button">LEARN MORE ABOUT JUPITER!</button>
</div>
</div>
</div>
*Update:
Increasing glyphicon size: In the glyphicon span set its style as "font-size:1.5em;"
To align it closer to name and description, add the style="text-align:right" at the glyphicon div container
The description is aligned to the named without the original css styles.
To increase padding (or margin) between the learn more button and description/icon, increase the learn more div top margin
New fiddle: https://jsfiddle.net/oh69hq71/18/
I have an image that takes up the fold, below a fixed nav. I Want to vertical align: middle the #fold-text and chevron over the image.
html markup:
<div class="row">
<img class="background-image" src="images/1400px_splash.jpeg">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
</img>
</div>
This CSS below usually works when I want to center one div within another, but not luck on this (maybe because the img height is set to "auto" ? ) . Can anyone tell me how to correct this?
.background-image {
height: auto;
width: 100%;
display: table;
}
#fold-container {
display: table-cell;
vertical-align: middle;
}
#fold-text {
font-size: 1.6em;
font-weight: bold;
background-color: rgba(black, 0.3);
color: white;
display: table-cell;
}
.fa.fa-chevron-down {
z-index: 500;
color:white;
text-align: center;
font-size: 2em;
font-weight: normal;
display: table-cell;
}
Your desired markup:
<div class="row">
<img class="background-image" src="images/1400px_splash.jpeg">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
</img>
</div>
... is not valid HTML. <img> tags don't contain any other markup, so what the browser sees is more like this:
<div class="row">
<!-- note the self closing img tag -->
<img class="background-image" src="images/1400px_splash.jpeg"/>
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
<!-- </img> don't know what to do with this, because img tags close themselves -->
</div>
What you need to do is more like this:
<div class="row">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
<img class="background-image" src="images/1400px_splash.jpeg"/>
</div>
</div>
... and just make sure the appropriate stylings are added to your elements to position them appropriately.
This bootstrap accordion is built using AngularJS: http://jsfiddle.net/Mrbaseball34/c6Lw2/
<div class="accordion-group ng-scope" ng-repeat="program in programs">
<div class="accordion-inner">
<div class="acc_label ng-binding">The Certified Insurance Counselors Program (CIC)</div>
<div class="pull-right select_links">
<a ng-click="reselect($index)" class="ng-binding">Select All</a> |
<a ng-disabled="!select_action($index)" ng-click="program.expand=!program.expand" class="ng-binding">Expand</a>
</div>
</div>
<div ng-repeat="topic in program.topics" collapse="!program.expand && !topic.checked" class="ng-scope collapse" style="height: 0px;">
<div class="accordion-inner">
<label class="checkbox"><input type="checkbox" value="CIC Agency Management" ng-checked="topic.checked" ng-model="topic.checked" class="ng-pristine ng-valid"><span class="ng-binding">CIC Agency Management</span></label>
</div>
</div>
<div ng-repeat="topic in program.topics" collapse="!program.expand && !topic.checked" class="ng-scope collapse" style="height: 0px;">
<div class="accordion-inner">
<label class="checkbox"><input type="checkbox" value="CIC Commercial Casualty" ng-checked="topic.checked" ng-model="topic.checked" class="ng-pristine ng-valid"><span class="ng-binding">CIC Commercial Casualty</span></label>
</div>
</div>
</div>
But I cannot get the "Select All | Expand" links aligned in the middle of the container.
Can any CSS gurus help out?
Don't worry about the "Select All | Expand" functionality. I just need the alignment corrected.
Also, I'm sorry that the CSS files have to be online vs. embedded in the fiddle.
I don't think it was made clear, I wanted the "Select All | Expand" links centered vertically like this:
After changes recommended by #Mohsen:
When expanded, it should stay near the group title.
horizontal align:
remove pull-right class and set text-align:center to .select_links:
DEMO
HTML
<div class="select_links"> <!-- pull-right remove -->
<a ng-click="reselect($index)" class="ng-binding">Select All</a>
|
<a ng-disabled="!select_action($index)" ng-click="program.expand=!program.expand" class="ng-binding">Expand</a>
</div>
CSS
.select_links {
position: relative;
line-height: 100%;
vertical-align: middle;
text-align: center; /* added */
}
update - vertical align
need to set position:relative on your accordion-group, for doing that you can add this class to that tag like this:
<div class="accordion-group ng-scope relative" <!-- relative added -->
ng-repeat="program in programs">
...
</div>
bring back pull-right and add vertical (or something else) class to your links container like this:
<div class="pull-right select_links vertical"> <!-- vertical added -->
...
</div>
then add these styles to your CSS:
.relative{
position:relative;
}
.vertical{
position: absolute;
right: 5px;
top: 50%;
margin-top: -3px; /* you can change it if is not enough */
}
jsFiddle is HERE
note: you can add this styles to your bootstrap classes but I think this is not a good way.
edit: set relative class to the title container: DEMO
<div class="accordion-inner relative">...</div>
try this
.select_links {
position: relative;
line-height: 100%;
vertical-align: middle;
margin: 0 auto;
width: 70%;
}
I am trying to put on the same line $('.prize-item input') and $('.prize-edit')
Here is the DOM structure (1) and the CSS code (2).
I tried to sue the display:inline-block with no success.
The prerequisite is the following:
1) You must not use position absolute.
2) Resizing the screen, the distance between the button and the input box should not change.
3) The DOM structure should be changed only if it is not possible to obtain the result I requested with CSS.
Demo: http://jsfiddle.net/jBme9/8/
(1)
<div class="control-group">
<div class="controls">
<div class="prize-edit">
<button type="button" class="btn" data-toggle="collapse" data-target="">Edit Same line</button>
</div>
<div class="prize-item">
<div class="control-group ">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="form-prize-item-name" value="prize same line">
</div>
</div>
</div>
</div>
</div>
(2)
.prize-edit {
float: right;
display: inline-block;
}
.prize-item input {
float: left;
display: inline-block;
}
You can use relative positioning. Please adjust these values for your real page.
Demo
Code:
.controls button {
float: right;
position:relative;
top:38px;
right:17px;
}
I used pixels 'cause you're using pixels, but this can be done with ems too.
To push the button outside the input, add another class to the input's wrapper. Let's call it "controlsWrapper".
So that you'll have in html:
<div class="controls controlsWrapper"><input...other stuff...></div>
And in CSS
.controls button {
float: right;
position:relative;
top:38px;
}
.controlsWrapper {
box-sizing: border-box;
width:100%;
padding-right:40px; /* width of the button + some space */
}
Check the demo
I think it´s not possible with this DOM structure. You want to have something like this:
<div class="aWrapper">
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<div class="prize-edit">
<button type="button" class="btn" data-toggle="collapse" data-target="">Edit Same line</button>
</div>
<div class="prize-input"><!-- I renamed the class! -->
<input type="text" class="form-prize-item-name" value="prize same line">
</div>
</div>
</div>
</div>
additional:
.label { diplay: block; }
.prize-edit { float: right; width: 20%; // adjust with paddings etc. }
.prize-input { float: left; width: 80% // adjust ... }