I would like to have my two divs(Up and down buttons) organized in a layout row side by side and taking the full widh of the page.
right now, they are organized like this :
My HTML is this :
<div layout="row">
<div class="btn btn-info btn-lg" width="50%;">
<span class="glyphicon glyphicon-menu-up"></span> Up
</div>
<div class="btn btn-info btn-lg" width="50%;">
<span class="glyphicon glyphicon-menu-down"></span> Down
</div>
</div>
Something like this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div layout="row">
<div class="col-xs-6">
<div class="btn btn-block btn-info btn-lg">
<span class="glyphicon glyphicon-menu-up"></span> Up
</div>
</div>
<div class="col-xs-6">
<div class="btn btn-block btn-info btn-lg">
<span class="glyphicon glyphicon-menu-down"></span> Down
</div>
</div>
</div>
If you are using boostrap you can do it in following way:
<div class="row">
<div class="col-md-6">
<div class="btn btn-info btn-lg btn-full-width">
<span class="glyphicon glyphicon-menu-up"></span> Up
</div>
</div>
<div class="col-md-6">
<div class="btn btn-info btn-lg btn-full-width">
<span class="glyphicon glyphicon-menu-down"></span> Down
</div>
</div>
</div>
CSS:
.btn-full-width { width: 100%; }
Edit: added CSS class for buttons.
Related
<div class="row">
<a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
<div class="row">
<textarea name="textareaAxs" ></textarea>
<a class="btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>
enter image description here
.row2 {
display: flex;
align-items: center;
}
<div class="row">
<a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
<div class="row2">
<textarea name="textareaAxs" ></textarea>
<a class="btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>
Here some DOCUMENTATION
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"/>
<div class="container">
<div class="row">
<div class="col">
<a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
</div>
<div class="row">
<div class="col">
<div class="input-group">
<textarea class="form-control" name="textareaAxs" ></textarea>
<div class="input-group-append">
<a class="input-group-button btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>
</div>
</div>
</div>
</div>
First button seems to break and i can't figure out what i did wrong. All seems in order to me.
<div class="row">
<div class="col-xs-4"
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
You haven't closed the second div opening tag. Also you need to close the row div.
<div class="row">
<div class="col-xs-4"> <!-- Close this tag -->
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
You haven't completed div tag. Along with that You have to close row class div
Hope this helps.
i need to build a panel body in a sidebar where the buttons inside ocuppy 6 columns at the moment i have something like this:
i want to have each button ocupy 6 columns and not what is happening at the moment.
here is what i did so far:
<div class="sidebar">
<h4>Document</h4>
<div class="panel-group">
<div class="panel panel-danger">
<div class="panel-body">
<div class="col-md-6">
<button class="btn btn-primary-outline btn-block">
<span class="glyphicon glyphicon-share"></span>
<br>Paragraph
</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary-outline btn-small">
<span class="glyphicon glyphicon-share"></span>
<br>
<span class="fontSize">Image</span>
</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary-outline btn-small">
<span class="glyphicon glyphicon-share"></span>
<br>
<span class="fontSize">Image</span>
</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary-outline btn-small">
<span class="glyphicon glyphicon-share"></span>
<br>Heading
</button>
</div>
</div>
</div>
<div class="panel panel-default">
</div>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="sidebar">
<h4>Document</h4>
<div class="panel-group">
<div class="panel panel-danger">
<div class="panel-body row">
<div class="col-md-6">
<button class="btn btn-primary-outline btn-block button">
<span class="glyphicon glyphicon-share"></span>
<br>Paragraph
</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary-outline btn-block">
<span class="glyphicon glyphicon-share"></span>
<br>
<span class="fontSize">Image</span>
</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary-outline btn-block">
<span class="glyphicon glyphicon-share"></span>
<br>
<span class="fontSize">Image</span>
</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary-outline btn-block">
<span class="glyphicon glyphicon-share"></span>
<br>Heading
</button>
</div>
</div>
</div>
<div class="panel panel-default">
</div>
</div>
</div>
Changed all button's class to btn-block from btm-small. Hope it helps
Buttons
Here is my code, and i dont know how to place the buttons side to side. (btw I'm new at coding)
<div class="second">
<div class="col-md-12 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
<div class="col-md-8 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
Just put the buttons inside the same form and div
<div class="second">
<div class="col-md-12 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
Since you are using bootstrap, there are a few things you need to know:
.col class will not work without putting the class within .container and .row classes. The other important thing is that the column numeric sizes add up to 12; right now yours add to 20. So your code should look more like this:
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
<div class="col-12 col-md-6">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
</div>
</div>
Here is a codepen to show it working
Refer to Bootstrap documentation on grids as well
<div class="row second">
<div class="col-md-4 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
</form>
</div>
<div class="col-md-8 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
<div class="second">
<div class="col-md-12 text-center">
<form>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">1.klasse </button>
<button class="btn btn-primary btn-lg" type="submit" formaction="1klasse.html">2.klasse </button>
</form>
</div>
</div>
The buttons were in different columns, so it went one line down.
Read more about Bootstrap grid system
Before looking into the answer below, I suggest that you read about boostrap grid system. Each row has 12 columns.
Your first <div> used up 12 columns, and that's why the second button of the second <div> is on the new row/line.
More details can be found here:
Bootstrap: Aligning two buttons on the same row
Image
So as you can see in the image above, the History button is not affected by the black outlines like the other buttons is. Apparently the button is not in the class but as you can see in the code below it is.
<div class="container" id="main-container">
<div class="row main-row">
<div class="col-sm-3">
<div style="padding-top: 10px; margin-bottom: 20px;">
<div id="topleft-menu">Menu</div>
<div class="topleft-link-wrapper logout" style="display: none;">
<button class="topleft-link btn btn-primary btn-block" id="change-trade-url-btn"><span class="glyphicon glyphicon-pencil"></span> Change your trade URL</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-info btn-block" data-toggle="modal" data-target="#about-modal"><span class="glyphicon glyphicon-list-alt"></span> About/How it works</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-warning btn-block" id="support-btn"><span class="glyphicon glyphicon-question-sign"></span> Support</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-default btn-block" id="donate-btn"><span class="glyphicon glyphicon-usd"></span> Donate</button>
</div>
<div class="topleft-link-wrapper">
<button class="topleft-link btn btn-success btn-block" id="history-btn"><span class="glyphicon glyphicon-list"></span> History</button>
</div>
I don't know why this problem occurs.
Also if you wanna inspect the site visit; www.csgoxd.net
The other elements have the css declaration:
.topleft-link-wrapper:not(:last-child)
So your last child element will not have the border declarations.