Line up adjacent DIVs vertically without forced <BR> - html

JSFiddle: https://jsfiddle.net/yL9b2ewu/1/
In this fiddle I have 3 DIVs using Bootstrap 3.3.7 that are next to each other; each DIV is col-sm-3.
Each DIV contains a fixed-size button, then there should be a small amount of space under the button, and then optional explanatory text. Each DIV should end with a border at the same level as the lowest available DIV regardless of whether it has text or not.
One solution is to hard-code some <BR>s for the explanation section. In the 3rd DIV I could put in 4 fixed <BR>s. But this hackery doesn't seem right to me, there should be something dynamic and robust.
<div class="col-md-12 col-sm-12 col-xs-12" style="margin-top:10px; margin-bottom: 10px; font-family:'Source Sans Pro', sans-serif; font-size: 14px">
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-success btnSubmitWizard"><b>Submit Recall Now<br><br></b></button>
<br><br>No changes can be made after the recall is submitted.
<!-- Can Insert <BR> here but wrong approach -->
</div>
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-primary btnSubmitWizard"><b>Review and Edit<br><br></b></button>
<br><br>Review or edit timeline before submitting.
<!-- Can Insert <BR> here but wrong approach -->
</div>
<div class="col-sm-4 cardstyle">
<button type="button" class="btn btn-primary btnSubmitWizard"><b>Logout and<br>Submit Later </b></button>
<br><br>
<!-- Can Insert <BR> here but wrong approach -->
</div>
</div>

I think that you could select only the last div using :last-child and add to it a bigger padding-bottom.

Give a class for the parent of the columns. Something like .colsParent.
Then, for the same breakpoint of Bootstrap #media, you set flexbox for this element.
#media (min-width: 768px) {
.colsParent {
display: flex;
}
}
By default, it fills the full height of the entire column.
Do not set display: flex inline, because it will affect the layout for devices smaller than the breakpoint above.

Related

How do I move the button after the character :

I have the following problem in html: Cannot move the add button to the side. I have tried inserting the words within the div of the button or removing the br/ in the button div. It doesnt work. I know this seems to be a stupid question to all the pros out here but im seriously stuck
<h4>More details: </h4>
<div class="col-md-1">
<div class="form-group">
<div class="text-sm-center">
<button type="button" class="btn btn-outline-success btn-rounded" id="addrow"><i class="dripicons-plus"></i></button>
</div>
</div>
</div>
If I understand correctly, you want the <h4>More details:</h4> element to be side-by-side with the + button in a row format. Since <h1>-<h6> and <div> tags are block-level the only way to have your h4 in the same row as the nested <button> is to manipulate the amount of space each element occupies, ie change their layout with CSS.
A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block".
To make the <h4> and the + button right next to eachother, you could use CSS Flexbox and nest your HTML in a parent container <div class="row">.
.row {
display: flex;
align-items: center;
}
.row .btn {
margin-left: 10px;
}
<div class="row">
<h4 class="details-heading">More details: </h4>
<div class="col-md-1">
<div class="form-group">
<div class="text-sm-center">
<button type="button" class="btn btn-outline-success btn-rounded" id="addrow">&plus;<i class="dripicons-plus"></i></button>
</div>
</div>
</div>
</div>
In this case you can just use CSS. You need all three of the parent DIV elements to have zero px for border-left, margin-left and padding-left.
Try adding another class to each, like:
<h4>More details: </h4>
<div class="col-md-1 left-side">
<div class="form-group left-side">
<div class="text-sm-center left-side">
<button type="button" class="btn btn-outline-success btn-rounded" id="addrow"><i class="dripicons-plus"></i></button>
</div>
</div>
</div>
CSS
.left-side {
margin-left: 0px;
border-left: 0px;
padding-left: 0px;
}
Some prefer 0 to 0px.
The reason to use another class, i.e. left-side is to avoid messing with any other elements elsewhere of the existing classes.
This method/answer is a bit of a hack; more elegant solutions will be out there.

Aligning text inside a Bootstrap button

I noticed there are similar questions however I tried the given solutions and nothing worked *
My custom CSS file is 100% linked correctly to the html file I'm working on *
I'm using Bootstrap v4.3.1 *
So as the title suggests, I'm trying to align text inside a Bootstrap button - I need to do that using my own custom CSS file.
I've created my new style.css file and linked it in the header (AFTER the Bootstrap CSS link), then I added a custom class (btn1) to my Bootstrap button:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn1" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
I then added the following code in my CSS:
.btn1{
text-align: left !important;
}
But the text on the button is still not aligned to the left. Any insights as for why it happens, and ways to solve the problem?
Thanks!
You will need to change the padding on your custom css to 0, as this is still picking up the bootstrap padding. Then you can set the width to whatever size you like and add custom padding if you wanted.
Example:
.btn1{
text-align: left !important;
padding: 0;
width: 50px;
}
Buttons in bootstrap are inline-block elements and do not have defined width. Therefore, text-align: left does not work.
You need to specify width of it explicitly and use align-left. And if you need to remove event the left padding, use pl-0.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row">
<div class="col">
<button class="btn btn-primary pl-0">Button</button>
</div>
<div class="col">
<button class="btn btn-primary w-100 text-left">Button</button>
</div>
<div class="col">
<button class="btn btn-primary pl-0 w-100 text-left">Button</button>
</div>
</div>
</div>
https://codepen.io/anon/pen/MMgxKz
Try this way 👇
.btn.btn1{
text-align: left;
min-width:250px;
}
note this way you don't need to add !important

Bootstrap control changes position height based on width of screen

I have a bootstrap row containing a header tag and a link tag. They are aligned on the same row when the screen width is less than 768 pixels. When the container width is 768 or greater the link element shifts a few pixels higher.
Here is an example that demonstrates this behaviour: https://jsfiddle.net/bz3399x8/
<div class="row">
<div class="col-sm-12">
<a class="btn btn-primary" href="#" style="width: 80px; float: right;">
<i class="icon-plus">
Add
</i>
</a>
<h1>
Hello World
</h1>
</div>
</div>
Here are screenshots demonstrating this behaviour.
There are two issues:
what is causing this?
how to i fix this?
your syntax according to Bootstrap Docs is wrong,
it needs the .container to wrap .row
and
h1 and a button elements needs to be wrapped in Bootstrap columns.
So, you can use .col-sm-10 + .col-sm-2 in this case.
Added .col-xs for demo
.row {
/* demo*/
background:red
}
.btn {
margin-top:20px /* choose as it fit you better */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-10">
<h1>
Hello World
</h1>
</div>
<div class="col-xs-2 col-sm-2">
<a class="btn btn-primary" href="#">
<i class="icon-plus">
Add
</i>
</a>
</div>
</div>
</div>
While wrapping elements in different column will help answer your problem. If you are looking at wrapping both elements inside single column you need to specify elements to be inline. Problem is occurring since h1 element and a element even though in same row for bootstrap but are displayed as block and inline-block.
Add display: inline-block to h1 element with top padding to a element. This should answer it as well.
Try it with display: inline on h1 see the difference in behavior. inline element dont support vertical margins.
Fiddle: https://jsfiddle.net/dk_dragonknight/m8ey6mba/

Center Set of Controls in Bootstrap 3 Row With Proper Vertical Alignment

I am new to web development, particularly CSS and Bootstrap. I am struggling to center the set of 5 items in a Bootstrap row. Here is what I have:
<div class="container-fluid">
<div class="row text-center" style="border:2px solid green">
<div style="display:inline-block;float:none;vertical-align:top;margin-top:8px">My Label</div>
<div class="col-xs-2 col-sm-2 col-md-1"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button1</button>
</div>
<div class="col-xs-3 col-sm-3 col-md-2"style="display:inline-block;float:none">
<input class="form-control" type="number"></input>
</div>
<div style="width:2%;display:inline-block;float:none"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-1"style="display:inline-block;float:none">
<button class="btn btn-default btn-block" role="button">Button2</button>
</div>
</div>
</div>
For the most part, it gives me the result I want in Firefox and Chrome. The controls are spaced a little and it is responsive -- the white space shrinks while the controls grow (in % of screen) as the screen gets smaller. Control widths are controlled via Bootstrap col-*-# classes. Though, IE seems to align the buttons at the bottom of the row for some reason. I'm not sure why.
Aside from defining custom CSS classes instead of style attributes, is this the correct/best way to achieve the result that I want? Or, is there a better way to do this in CSS or Bootstrap? It seems hackish to have to use vertical-align and margin to get the label to line up. Also, I started out using form elements and classes. But, that kept making things worse. What is the benefit of using the form element or downside to not using it?
I read numerous similar posts. But they all seemed to have something different enough that the solutions seemed to not fit what I am doing. I have a set of controls that I want centered as a unit. I do not want to simply snap them to the 12-column Bootstrap grid.
JSFiddle
You still can use a custom class when you need it :
.classname {
display: inline-block;
vertical-align: middle;
float: none;
}

Bootstrap floating drops item onto second line

This is my code: http://www.bootply.com/Tm5C3Ja7RL
<div class="col-md-12">
<h3>Test</h3><button class="btn btn-default pull-right">Button</button>
</div>
It drops the button onto a second line as well as aligning it to the right. I only want to push it to the right. Can anyone show me the best way of doing this.
As EWit mentioned, a header is a block element.
This block will push down other elements behind it.
There are several solutions, one better/cleaner than the other
Changing the header to an inline element
h3 {
display:inline;
}
This will result in your title with the button right next to it.
I don't think the pull-right will have an effect on it. Should be tested.
You could also add the condition that the h3 must have a certain class or must be inside an element with a certain class.
Splitting the column in 2
<div class="col-md-10">
<h3>Test</h3>
</div>
<div class="col-md-2">
<button class="btn btn-default pull-right">Button</button>
</div>
By also using col-sm, for example, you could alter this so that the button is displayed next to the title in a medium/large screen and under it in a small screen.
However, the pull-right might make it look pretty weird then.
<div class="col-md-10 cold-sm-12">
<h3>Test</h3>
</div>
<div class="col-md-2 col-sm-12">
<button class="btn btn-default pull-right">Button</button>
</div>
Put the button in the h3-element
As EWit mentioned, you can also put the button inside the h3-element.
This will keep the button in the same line, but might alter the text formatting.
<div class="col-md-10">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
Put it inside the <h3>. Headers in HTML take up the full width as a block object. As such other objects are pushed down.
Try:
<div class="col-md-12">
<h3>Test <button class="btn btn-default pull-right">Button</button></h3>
</div>
I myself extend it with some markup for basic links but to align it to the same height as the text in the header.
h1 .pull-right {
padding: 15px 5px 0 0;
}
But I have no idea what values would be best for a button to align it. Trial and error I guess.