<div class="box">
<button class="button">Center me</button>
</div>
<button class="is-center"> is not working.
Yes, there is a native way.
Bulma offers has-text-centered class for centering text, inline and inline-block elements.
You can use following code:
<div class="box has-text-centered">
<button class="button">Center me</button>
</div>
Demo:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.css" rel="stylesheet"/>
<div class="box has-text-centered">
<button class="button">Center me</button>
</div>
You can also try:
<div class="columns is-centered">
<div class="column is-half">
<button class="button">Center me</button>
</div>
</div>
Quickfix: wrap the button in a div with style="text-align:center;"
<div style="text-align: center;">
<button class="button is-success">Center me</button>
</div>
Related
I am trying to make three parallel square shape buttons with title in center. something like this
My title
Square button-1 square button-2 square button-3
My code is as follows::
<div class="col-md-12 pt-md-5 text-center">
<p>My title</p>
</div>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div>
<button class="btn btn-sq-lg btn-info">button-1</button>
</div>
<div >
<button class="btn btn-sq-lg btn-info">button-2</button>
</div>
<div>
<button class="btn btn-sq-lg btn-info">button3</button>
</div>
</div>
</div>
</div>
.btn-sq-lg {
width: 150px !important;
height: 150px !important;
}
output I am getting is three vertical without any spaces. But I want three parallel square buttons with equal spaces
how can I do that?
Also how can I make button with white color and black text and title with white color and increase font size?
Just made button as info but want a white background with black text
col-xs-** has been replaced with col-** in v4. You need to separate each button with col-4
.btn-sq-lg {
width: 150px !important;
height: 150px !important;
background: #ffff!important;
color: black!important
}
.square {
text-align: center
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<p class="p-5 w-100 text-center">My title</p>
<div class="container">
<div class="row">
<div class="col-4">
<div class="square">
<button class="btn btn-sq-lg btn-info ">button-1</button>
</div>
</div>
<div class="col-4">
<div class="square">
<button class="btn btn-sq-lg btn-info">button-2</button>
</div>
</div>
<div class="col-4">
<div class="square">
<button class="btn btn-sq-lg btn-info">button3</button>
</div>
</div>
</div>
</div>
Use justify-content-between to row and remove the div with col-xs-4 (xs does not exist in bootstrap 4)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="col-md-12 pt-md-5 text-center">
<p>My title</p>
</div>
<div class="container">
<div class="row justify-content-between">
<div>
<button class="btn btn-sq-lg btn-info">button-1</button>
</div>
<div>
<button class="btn btn-sq-lg btn-info">button-2</button>
</div>
<div>
<button class="btn btn-sq-lg btn-info">button3</button>
</div>
</div>
</div>
How to to select a class with in a class? CSS
Need to Do:
Select "fourthRow" in "buttons" and make the class appear on it's own line
Also, if anyone knows how to make this code more efficent it would be very much appreciated. Very wet code.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="buttons">
<div class="fourthRow">
<div>
<button class="7">7</button>
</div>
<div>
<button class="8">8</button>
</div>
<div>
<button class="9">9</button>
</div>
<div>
<button class="divide">รท</button>
</div>
</div>
<div class="thirdRow">
<div>
<button class="4">4</button>
</div>
<div>
<button class="5">5</button>
</div>
<div>
<button class="6">6</button>
</div>
<div>
<button class="multiplicaton">x</button>
</div>
</div>
<div class="secondRow">
<div>
<button class="1">1</button>
</div>
<div>
<button class="2">2</button>
</div>
<div>
<button class="3">3</button>
</div>
<div>
<button class="subtract">-</button>
</div>
</div>
<div class="firstRow">
<div>
<button class="0">0</button>
</div>
<div>
<button class="dot">.</button>
</div>
<div>
<button class="equal">=</button>
</div>
<div>
<button class="add">+</button>
</div>
</div>
</div>
</body>
</html>
.....................................................................
Select "xRow" in "buttons" and make the class appear on it's own line:
-
.fourthRow, .thirdRow, .secondRow, .firstRow {
display: flex;
}
I am trying to write an "or" in between 2 ".col-md-1".
For example:
Green or Blue
This is my code:
<div class="row">
<div class="col-md-1">
<button class="btn">Green</button>
</div>
<div class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
What should I write inside the code or should I try another technique?
You could add another col-md-1 between the 2 elements (or whatever column size suits your needs):
<div class="row">
<div class="col-md-1">
<button class="btn">Green</button>
</div>
<div class="col-md-1">
<p>or</p>
</div>
<div class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
Depends on how the result should look like. You can do something like this for example:
<div class="col-md-3">
<button class="btn"> Green </button> or <button class="btn"> Blue </button>
</div>
Give them and ID.
<div class="row">
<div class="col-md-1" id="green">
<button class="btn">Green</button>
</div>
<div class="col-md-1" id="blue">
<button class="btn">Blue</button>
</div>
</div>
and then you can select the first one and append an element after it
$("$green").after('<div>OR</div>')
give them an ID & do the if else in Javaascript
<div class="row">
<div id="greenDiv" class="col-md-1">
<button class="btn">Green</button>
</div>
<div id= "redDiv" class="col-md-1">
<button class="btn">Blue</button>
</div>
</div>
in js
<script>
$(document).ready(function(){
if(someCondition == true){
$("#redDiv").show();
$("#greenDiv").hide();
}else{
$("#redDiv").hide();
$("#greenDiv").show();
}
});
</script>
I have a css class:
.content-shadow {
box-shadow: 0 0 5px #888888 !important;
}
I am using this class at to locations in the file:
<div class="root-content-padder">
<div class="container">
<h1><strong>"</strong>Die Freiarbeit ist nur das Ergebnis deiner Basis</h1>
<div class="content-shadow">
<div class="text-center st-padding">
<iframe style="width: 50vw; height: 430px"
src="youtube.com...."></iframe>
</div>
<div class="text-center st-padding">
<button class="btn btn-default btn-lg">Text</button>
<strong>Or</strong>
<button class="btn btn-default btn-lg">Text</button>
</div>
</div>
</div>
<div style="height: 25px;"></div>
<div class="container">
<div class="content-shadow">
<div class="col-lg-4">
<h1>LoL</h1>
</div>
<div class="col-lg-8">
<p>Text</p>
<br/>
<a class="btn btn-default btn-lg" href="?page=me">Weiter lesen</a>
</div>
</div>
</div>
</div>
Now the first div which has the class content-shadow works fine, without a problem, but on the second one the shadow does not appear.
I can make the shadow visible on the second, if i remove the two divs <div class="col-lg-4">...</div> and <div class="col-lg-8">...</div>
That is extremely strange and i have no idea why, maybe here someone can help.
Regards Liz3
If you remove any style from debugger tool, it means it comments your style at run time.
As you are using external style and if you remove it from debugger tool, it comments the styles written in content-shadow, so where ever you have used content-shadow doesn't work.
But if you use inline-style and apply box-shadow in two different div and then remove any one of the box-shadow from debugger tool, it just comment your internal-style of that particular div at run-time where as another one will work
So, it's a normal behaviour
Coming to your second point, col-lg-* removes box-shadow
It is working with col-lg-* also as you can see the snippet. But shadow at the bottom is not visible, to make it visible apply padding-bottom: 10px; in the parent element of content-shadow.
.content-shadow {
box-shadow: 0 0 10px darkgreen !important;
}
<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="root-content-padder">
<div class="container">
<h1><strong>"</strong>Die Freiarbeit ist nur das Ergebnis deiner Basis</h1>
<div class="content-shadow">
<div class="text-center st-padding">
<iframe style="width: 50vw; height: 230px" src="youtube.com...."></iframe>
</div>
<div class="text-center st-padding">
<button class="btn btn-default btn-lg">Text</button>
<strong>Or</strong>
<button class="btn btn-default btn-lg">Text</button>
</div>
</div>
</div>
<div style="height: 25px;"></div>
<div class="container" style="padding-bottom: 10px;">
<div class="content-shadow">
<div class="col-lg-4">
<h1>LoL</h1>
</div>
<div class="col-lg-8">
<p>Text</p>
<br/>
<a class="btn btn-default btn-lg" href="?page=me">Weiter lesen</a>
</div>
</div>
</div>
</div>
So the solution was pretty straight forward:
I had to put a <div style="clear: both;"></div> after the
<div class="col-lg-4">
<h1>LoL</h1>
</div>
<div class="col-lg-8">
<p>Text</p>
<br/>
<a class="btn btn-default btn-lg" href="?page=me">Weiter lesen</a>
</div>
If I enclose with a <div> with class="row" and give each button class="span4" the buttons fill the total width of the screen.
I want each button to be only as wide as the text which it contains, with the centers being at 25%, 50% and 75% of the width.
[aaa] [bbb] [ccc]
not
[ aaa ][ bbbb ][ cccc ]
I am new to bootstrap and not a CSS guru.
How do I achieve this?
My buttons also have class="btn-outline btn-default", but that shouldn't affect things (I think) .
By the way, I am currently considering exactly 3 buttons, but if a generic solution for any number is just as easy, that would be welcome.
first of all from your classes it seems you are still using bootstrap-v2, try using bootstrap-v3 (v4 it is still in alpha beta[now] stage), and you can achieve what you want with this:
.row {
border: 1px dashed red /* demo */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center">
<div class="col-xs-4">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="col-xs-4">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="col-xs-4">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
UPDATE (bootstrap-v4)
For those who are using/want to use bootstrap V4, here is how:
.row {
border: 1px dashed red /* demo */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row text-center">
<div class="col-4">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="col-4">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
Try to use a div with class="row" and 3 div with the class="span4 text-center" and put a button in each of these
The bootstrap way would be
.col-md-3 {
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
</div>
</div>
or to do it using plain CSS and flexbox
.row {
display: flex;
}
.col-md-4 {
flex-grow: 1;
text-align: center;
}
<div class="container">
<div class="row">
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
<div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
</div>
</div>