I'd really appreciate some help on an issue i'm having.
For reference: http://trs-studios.com/test
I'm trying to get the 3 boxes (side to side) to align to the center of the page.
<div class="wrapper">
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> MEDIA</a>
<div class="spacer"/>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> STUDIO</a>
<div class="spacer"/>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> DESIGN</a>
</div>
Css for wrapper
.wrapper {
padding-top: 100px;
text-align: center;
}
Css for spacer
.spacer {
display: inline;
margin: 50px 50px;
position: relative;
text-align: center;
}
I'd appreciate any help!
Forget those spacing divs, HTML is not for styling.
Using display: inline-block on your links, you can simply put margin on them.
HTML:
<div class="wrapper">
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">MEDIA</a>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">STUDIO</a>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">DESIGN</a>
</div>
CSS:
.wrapper {
text-align: center;
}
.wrapper .btn {
display: inline-block;
margin: 50px 25px;
}
Working demo
Related
I need the left block to the left side of my footer and the right block to the right side of my footer. But for some reason both are underneath. Any help would be appreciated!
I tried a few things but didnt work and chatgpt wont give me the proper solution.
Below I inserted html and css, maybe someone could help me with this, would be nice.
.mastfoot .inner {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.mastfoot .inner>div {
width: 25%;
}
.mastfoot .inner>div>a {
margin-right: 10px;
margin-bottom: 10px;
text-align: center;
}
.mastfoot .inner>div>a {
display: block;
}
.mastfoot .inner>div {
padding: 10px;
}
.d-flex {
display: flex;
flex-direction: column;
}
.btnfooter {
display: block;
margin-bottom: 5px;
}
.left-block {
justify-content: flex-start;
}
.right-block {
justify-content: flex-end;
}
<footer class="mastfoot mt-auto">
<div class="inner d-flex justify-content-between">
<div class="d-flex left-block">
<div>
<h4>Left Block</h4>
</div>
<div>
<a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
<a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
<a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
<a class="btn btnfooter btn-outline-danger btn-sm" href="#" target="_blank">.....</a>
</div>
</div>
</div>
<div class="inner d-flex justify-content-between">
<div class="d-flex right-block">
<div>
<h4>Right Block</h4>
</div>
<div>
<a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
<a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
<a class="btn btnfooter btn-outline-warning btn-sm" href="#" target="_blank">.....</a>
</div>
</div>
</div>
</footer>
I'm struggling to stretch the left navigation section to reach the bottom of the page and stay responsive. I'm using Bootstrap 5.2.0. I tried many solutions like h-100, flex-grow, min-vh-100m self-align: stretch. Nothing seems to do the trick.
Codepen: (You may have to increase the height of the output window to see what I mean) :
https://codepen.io/ma66ot/pen/KKQZXew
HTML
<div class="col-md-3 col-lg-2">
<div class="logo">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/300px-Circle_-_black_simple.svg.png" id="circle" alt="">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="navigation ">
<div class="title-nav">
<img src="./assets/verwaltung.png" alt="" id="verwaltung-logo">
</div>
<div class="button-container">
<ul>
<li><button type="button" class="btn btn-primary btn-lg btn-block">Übersicht</button></li>
<li><button type="button" class="btn btn-primary btn-lg btn-block">TrainerInnen</button></li>
<li><button type="button" class="btn btn-primary btn-lg btn-block">TeilnehmerInnen</button></li>
<li><button type="button" class="btn btn-primary btn-lg btn-block">Gruppen</button></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 col-lg-10">
<div class="mainfenster">
</div>
</div>
</div>
</div>
</div>
CSS
h2 {
width:100%;
}
html button {
border: 0;
width: 100%;
}
html ul {
list-style-type: none;
padding: 0;
margin: 0;
}
html .container-fluid {
padding: 1em;
}
#circle{
width: 100%;
height: 100%;
}
#verwaltung-logo {
width: 50%;
height: 50%;
}
html .links {
padding-right: 3em;
}
/* Navigation */
html .navigation {
background: #FFA500;
border-radius: 48px;
padding: 1em;
margin-top: 1em;
}
li {
margin-top: 1em;
margin-bottom: 1em;
}
.button-container{
width: 80%;
margin: auto;
}
.navigation a {
color: white;
text-decoration: none;
}
.mainfenster {
background: #FF6E13;
border-radius: 48px;
overflow-y: scroll;
height: calc(100vh - 2em);;
}
/* Hide scrollbar for Chrome */
.mainfenster::-webkit-scrollbar {
display: none;
}
.mainfenster {
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.mainfenster button {
border-radius: 10px !important;
}
As explained here anytime you want to fill or stretch the remaining height flexbox column direction and flex grow.
make the left column viewport height and use min-vh-100
also make the left column d-flex flex-column
use flex-grow-1 on the div you want to fill the remaining column height
finally, use h-100 on the navigation so it fills the height of its' parent
https://codeply.com/p/CqV3FF1x5L
<div class="container-fluid ">
<div class="row">
<div class="col-md-3 col-lg-2 min-vh-100 d-flex flex-column">
<div class="logo">
<div>
<img ...>
</div>
</div>
<div class="row flex-grow-1">
<div class="col-md-12">
<div class="navigation h-100">
<div class="title-nav">
<img .. >
</div>
<div class="button-container">
<ul>
<li><button type="button" class="btn btn-primary btn-lg btn-block">Übersicht</button></li>
<li><button type="button" class="btn btn-primary btn-lg btn-block">TrainerInnen</button></li>
<li><button type="button" class="btn btn-primary btn-lg btn-block">TeilnehmerInnen</button></li>
<li><button type="button" class="btn btn-primary btn-lg btn-block">Gruppen</button></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 col-lg-10">
<div class="mainfenster">
</div>
</div>
</div>
</div>
First you need to fix height of left logo after that you need to add height to .navigation class and minus height of logo. see the below exmple
html .navigation {
height: calc(100vh - 200px);
}
In this above case your logo div height 200px.
Trying to build a new site using Bootstrap-4
I'm trying to align a logo to the left, a link button in the center and a link button to the right of a footer div. At the moment, I've got it working except the logo is vertically aligned so that its top is middled rather than the center of the image, so its hanging low!
I've tried vertical aligning it and experimented with justify contents settings.
.footer {
background-color: #68B3E2;
text-align: center;
padding: 30px;
justify-content: space-around;
}
.logo {
display:inline-block;
float:left;
}
.center_btn {
display:inline-block;
float:none;
}
.right_btn {
display:inline-block;
float:right;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="footer">
<img class=logo src="images/logo.png" width="120" height="120" alt="">
<a class="center_btn btn-primary btn-lg" href="#" role="button">Ask a question</a>
<a class="right_btn btn-primary btn-lg" href="#" role="button">Register</a>
</div>
This is simpler using the Bootstrap flexbox util classes (no need for all the extra CSS)...
<div class="footer d-flex justify-content-between align-items-center">
<img class=logo src="//placehold.it/120" width="120" height="120" alt="">
<a class="center_btn btn-primary btn-lg" href="#" role="button">Ask a question</a>
<a class="right_btn btn-primary btn-lg" href="#" role="button">Register</a>
</div>
https://codeply.com/p/QpjEZtn11G
Good day! Just use Flexbox CSS, keep it simple.
.footer {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: #68B3E2;
padding: 30px;
}
<div class="footer">
<img class=logo src="https://avatars.mds.yandex.net/get-pdb/2978990/ac5c48be-c30e-4595-9f4b-72fa8d31addb/s375" width="120" height="120" alt="">
<a class="center_btn btn-primary btn-lg" href="#" role="button">Ask a question</a>
<a class="right_btn btn-primary btn-lg" href="#" role="button">Register</a>
</div>
I have a challenge, and would like to know the cleanest solution with the minimal effort custom side as I am using Bootstrap (and trying to solve without hardcoded values as I would like to use it as component with Angular...).
Below there is the code, but basically I have the problem on title. Two children, one is text and the other a div containing buttons which I would like to move to the right horizontally. Unfortunately, when I do that, then the text supposed to stay to the left is loosing the vertical alignment.
Here the code, where I would like to have Button in the middle:
.pi-button-with-buttons{
width: 100%;
height: 50px !important;
text-align: left !important;
}
.pi-button-with-buttons span {
vertical-align: middle;
}
.pi-button-with-buttons div {
display: inline-block;
float:right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn btn-default pi-button-with-buttons">
<span>Button</span>
<div>
<a class="btn btn-default" role="button">Inside 1</a>
<a class="btn btn-default" role="button">Inside 2</a>
</div>
</div>
Thanks in advance for your help!
Option 1: using flexbox
.pi-button-with-buttons{
width: 100%;
height: 50px !important;
text-align: left !important;
}
.pi-button-with-buttons span {
display: inline-flex;
align-items: center;
height: 100%;
}
.pi-button-with-buttons div {
display: inline-block;
float:right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn btn-default pi-button-with-buttons">
<span>Button</span>
<div>
<a class="btn btn-default" role="button">Inside 1</a>
<a class="btn btn-default" role="button">Inside 2</a>
</div>
</div>
Option 2: using line-height
.pi-button-with-buttons {
width: 100%;
height: 50px !important;
text-align: left !important;
}
.pi-button-with-buttons span {
line-height: 36px;
}
.pi-button-with-buttons div {
display: inline-block;
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn btn-default pi-button-with-buttons">
<span>Button</span>
<div>
<a class="btn btn-default" role="button">Inside 1</a>
<a class="btn btn-default" role="button">Inside 2</a>
</div>
</div>
You can simply use flex like this :
.pi-button-with-buttons{
width: 100%;
height: 50px !important;
display:flex!important;
align-items:center;
}
.pi-button-with-buttons div {
flex:1;
text-align:right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn btn-default pi-button-with-buttons">
<span>Button</span>
<div>
<a class="btn btn-default" role="button">Inside 1</a>
<a class="btn btn-default" role="button">Inside 2</a>
</div>
</div>
Yes, unfortunately float: right loses the display: inline-block behaviour. Instead, remove the float: right and use flexbox on the wrapper, like so:
.btn-default {
display: flex !important;
justify-content: space-between;
align-items: center;
}
So I have 3 buttons in a row (2 bootstrap split-buttons and 1 basic button) and I want to place them accordingly. So, everyone is inside a div of width: 32%; (themselves in a div of 96%, so exactly the third for each "mini-div"). Then, I want that every button gets centered in their "mini-divs". I tried to margin: auto, but it's not working. I made it with the basic button by using align-text: center. However, the 2 others, which are split-buttons, stick to the left side of their divs.
Here's an image (the blue boxes are the border of the "mini-divs":
Here's my HTML...
<div id="boutons">
<!-- Split button, ajouter -->
<div class="btn-group dropup" id="btn1">
<button type="button" class="btn btn-primary">Ajouter 1 vecteur</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu" id="ajouter">
<li>1 </li>
<li>2 </li>
<li>3</li>
<li>4 </li>
<li>5 </li>
</ul>
</div>
<!-- Split button, enlever -->
<div class="btn-group dropup" id="btn2">
<button type="button" class="btn btn-danger">Enlever 1 vecteur</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu" id="enlever">
<li>1 </li>
<li>2 </li>
<li>3</li>
<li>4 </li>
<li>5 </li>
</ul>
</div>
<div id="btn3">
<button type="button" class="btn btn-info">Activer le graphique</button>
</div>
</div>
... and CSS
#boutons
{
margin-left: auto;
margin-right: auto;
width: 96%;
}
.btn-group a
{
text-align: center;
font-weight: bold !important;
}
#btn1, #btn2, #btn3
{
display: inline-block;
width: 32%;
}
#btn3
{
text-align: center;
}
Put split button (or btn-group) inside another div:
<div id="boutons">
<div id="btn1">
<div class="btn-group dropup" >
<!-- btn-group content -->
</div>
</div>
<div id="btn2">
<div class="btn-group dropup">
<!-- btn-group content -->
</div>
</div>
<div id="btn3">
<button type="button" class="btn btn-info">Activer le graphique</button>
</div>
</div>
and then this css would work perfectly:
#boutons > div {
text-align: center;
}
You have to wrap your buttongroup buttons in an additional div to make the alignment work:
take a look here:
http://www.bootply.com/6FnWLABceC
<div id="btn1">
<div class="btn-group dropup">
...
#btn3
{
text-align: center;
}
Only apply to your btn3
And
.btn-group a
{
text-align: center;
font-weight: bold !important;
}
Is apply to your a inside your btn's
Try:
#btn1,
#btn2,
#btn3{
text-align: center;
}
change your CSS to this
/* CSS used here will be applied after bootstrap.css */
#boutons
{
margin-left: auto;
margin-right: auto;
width: 96%;
}
.btn-group a
{
text-align: center;
font-weight: bold !important;
}
#btn1, #btn2, #btn3
{
display: inline-block;
width: 32%; background:#fc0;text-align: center;
}
#btn3
{
text-align: center;
}
.btn-group > .btn, .btn-group-vertical > .btn{float:none;}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
margin-left: -4px;
}
See Bootply (I changed the bg color so you can see the alignment, but you must obviously adjust it to your needs)