Bulma - Button Class forcing Inline - html

I am new to bulma but have been trying to make a simple webpage with it.
I have run into a frustrating problem where I believe one of the classes "button is-large" is forcing elements on my page to be inline.
Here is a minimal code demonstration of what is happening:
<div class="column" style="height: 200px">
<a class="button is-fullwidth" style="height: 100%">
<p> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt=""> </p>
<p class="title">Print Release</p>
</a>
</div>
The elements in the above code will show up inline.
I want the elements inside of the "a tag" to stack on top of one another. When the "a tag" has the class "button is-fullwidth" it forces the two elements to be inline; whereas if this class is removed they will end up on top of one another no issues.
Here is a full jfiddle demonstrating different approaches I have taken to resolve my issue. I have tried three different ways to make these elements appear on new lines but to no avail.
Is this just an inherent property of the "button ..." class? Can I keep the button class while also maintaining new lines?

The class button is styled using flexbox. The property display: flex makes its contents appear 'inline'. You can learn more about flexbox here and here.
There are several ways to get the layout you want, here is one approach:
Add the .is-block modifier to a.button - This will override the display property, and ensure that block elements will stack. In your example, p is a block element, and img is an inline element. (Alternatively, you could correct this in CSS by adding flex-direction: column to your button.)
Instead of adjusting the height of .column using inline CSS, you could create a new modifier class that can be added to columns when you need a fixed height. I have added is-fixed-height and height-200 to the .column and used some custom CSS to define these.
Bulma gives .button a height of 2.25em. You need to override this with 100%. Again, you could create a modifier class and add it to the button (something like is-height-100), or simply target the button you want with CSS. Both options are preferable than using inline CSS.
The images you are using are too big to allow the text to fit in below the button. Instead of using height: 200px on the column, use min-height. If you must use a height of 200px, you will need to make some adjustments to the image. Let me know and I can try help.
fiddle
.is-fixed-height.height-200 {
min-height: 200px;
}
.is-fixed-height.height-200 .button {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet"/>
<div class="container">
<div class="block">
<div class="columns">
<div class="column is-fixed-height height-200">
<a class="button is-block is-fullwidth">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
<p class="title">Print Release</p>
</a>
</div>
<div class="column is-fixed-height height-200">
<a class="button is-block is-fullwidth">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
<p class="title">Print Release</p>
</a>
</div>
<div class="column is-fixed-height height-200">
<a class="button is-block is-fullwidth">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
<p class="title">Print Release</p>
</a>
</div>
</div>
</div>
</div>

You gave the anchor a class of button and full-width
The class button always place content inline
HTML
<a class="btn is-fullwidth" style="height: 100%">
<p> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt=""> </p>
<p class="title">Print Release</p>
</a>
CSS
.btn {
text-align: center;
}
I have changed the button class with custom class name btn then I gave it a center align with CSS

Related

In a responsive website (using bootstrap), how to center an anchor tag containing an image

The following is not an option
<div class="container">
<a href="/Home">
<img class="img-responsive center-block" src="/home_logo.png" alt="Home"/>
</a>
</div>
Cause the entire row (container) is now clickable and not just the home_logo.png
Is there any graceful way (maybe a bootstrap class) to make only the image clickable (and also for the image to be responsive).
First of all, you may to see, that you have two elements with display: block behavior (classes .container, center-block and img-responsive have display: block property) and one element with display: inline behavior (tag's <a> default behavior). You need to change display: inline to display: inline-block. Simple solution to center nesting elements is to add to parent element (div.container in this case) one more Bootstrap's class .text-center. Class .center-block is extra and you may to remove it.
<div class="container text-center">
<a class="inline_block" href="/Home">
<img class="img-responsive" src="/home_logo.png" alt="Home">
</a>
</div>
.inline_block {
display: inline-block;
}
JSFiddle-example
try this
<div class="container text-center">
<a href="/Home" class="inline_block">
<img class="img-responsive center-block" src="http://icons.iconarchive.com/icons/janosch500/tropical-waters-folders/512/Burn-icon.png" alt="Home">
</a>
</div>
working fiddle
In Bootstrap 5 you can use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
<div class="d-flex align-items-center">
<img src="/images/jack.jpg">
</div>
Check docs link - https://getbootstrap.com/docs/5.0/utilities/flex/#align-items

<a> clickable area too large around image with img-responsive, center-block

See http://codepen.io/robbielaldrich/pen/ZWJyjO?editors=1100.
HTML:
<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
<img class="img-responsive center-block" src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>
The <a> tag seems to be extending to the margin of the <img>, but I can't reduce the margin or the image will no longer be centered.
Thanks for any help you can give!
Why you dont use a div to wrap and halign your image?
see my code
HTML
<div class="text-center">
<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
<img src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>
</div>
CSS
img{
display: inline-block
}
EDIT:
Codepen: http://codepen.io/anon/pen/grxjmK
Bootstrap's CSS is sets both center-block and img-responsive to display: block
A block level element becomes like a <div> and will take up the whole width of its container if a width or max-width isn't specified. The anchor is wrapped around the entire image block, including the empty space.
You could override the display: block easy enough and center-align the image as if it were text:
<div class="text-center">
<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
<img class="img-responsive center-block" style="display: inline-block !important;" src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>
</div>
But without knowing the context of the layout I can't say if there is a better solution.

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/

How to place <h3> and <button> elements side to side

I'm trying to figure out how to place my <h4> tag and <button tag to be side by side.
Current Behaviour - Right now they are underneath my image and I want them to put in a horizontal position.
Required Behaviour - I want the <h4> to be side by side with the image and the <button> side by side with the <h4>.
I tried floating to the right and display blocks, but the elements are still underneath the image and one another.
Codepen Link
Browsers by default typically display header elements as block. Use inline-block to not have it be in it's own line.
HTML
<h4>title</h4>
<button>button</button>
CSS
h4 {
display: inline-block;
}
DEMO: http://codepen.io/anon/pen/bVPXOK
Maybe
<h4 style="display:inline-block;">
heading
</h4>
<button> submit </button>
?
I saw your codepan the real problem was that your button was outside the right div that is why it was not aligned next to <h4>. I have edited the code (Updated Working Codepan)-
Modified CODE
<div class=" panel-body">
<div class="row-fluid">
<div class="row-fluid">
<img class="hotel-img img-responsive img-rounded" src="http://en.hotel-palaciodelmar.com/static/galerias/hotel/01-hotel-santander-sercotel-palacio-del-mar-fachada-foto.jpg" />
<h4 class="hotel-title""><span class="hotel-location"></span> Grand Master Flex</h4>
<button class="btn btn-primary" type="button" href="#more-info" data-toggle="modal"><i class="fa fa-info-circle"></i> More info</button>
</div>
</div>
</div>
instead of this (your previous code) -
<div class=" panel-body">
<div class="row-fluid">
<div class="row-fluid">
<img class="hotel-img img-responsive img-rounded" src="http://en.hotel-palaciodelmar.com/static/galerias/hotel/01-hotel-santander-sercotel-palacio-del-mar-fachada-foto.jpg" />
<h4 class="hotel-title""><span class="hotel-location"></span> Grand Master Flex</h4>
</div>
<button class="btn btn-primary" type="button" href="#more-info" data-toggle="modal"><i class="fa fa-info-circle"></i> More info</button>
</div>
</div>
and to align both <h4> and <Button> next to image you have to change your css and add display: inline-block !important; like this (Updated Codepan with image alignment) -
CSS
/* Hotel Search Panel */
.hotel-img {
display: inline-block !important;
width: 250px;
}
Another option you can use is the "float-right" class. If you nest your button in the h4, it can be accomplished like so:
<h4>Title<button class="float-right">My Button</button></h4>
Hope that helps!

Bootstrap: adding gaps between divs

If my page uses the Bootstrap class row, col-md-x and such to arrange the content, what would be the proper way to create a distance between each div containing a whole element semantically speaking?
I am adding a div with a padding between the divs to simulate the gap, is this a good tactic or is there a better one?
Starting from Bootstrap v4 you can simply add the following to your div class attribute: mt-2 (margin top 2)
<div class="mt-2 col-md-12">
This will have a two-point top margin!
</div>
More examples are given in the docs: Bootstrap v4 docs
Adding a padding between the divs to simulate a gap might be a hack, but why not use something Bootstrap provides. It's called offsets. But again, you can define a class in your custom.css (you shouldn't edit the core stylesheet anyway) file and add something like .gap. However, .col-md-offset-* does the job most of the times for me, allowing me to precisely leave a gap between the divs.
As for vertical spacing, unfortunately, there isn't anything set built-in like that in Bootstrap 3, so you will have to invent your own custom class to do that. I'd usually do something like .top-buffer { margin-top:20px; }. This does the trick, and obviously, it doesn't have to be 20px, it can be anything you like.
I required only one instance of the vertical padding, so I inserted this line in the appropriate place to avoid adding more to the css. <div style="margin-top:5px"></div>
The easiest way to do it is to add mb-5 to your classes. That is <div class='row mb-5'>.
NOTE:
mb varies betweeen 1 to 5
The Div MUST have the row class
An alternative way to accomplish what you are asking, without having problems on the mobile version of your website, (Remember that the margin attribute will brake your responsive layout on mobile version thus you have to add on your element a supplementary attribute like #media (min-width:768px){ 'your-class'{margin:0}} to override the previous margin)
is to nest your class in your preferred div and then add on your class
the margin option you want
like the following example:
HTML
<div class="container">
<div class="col-md-3 col-xs-12">
<div class="events">
<img src="..." class="img-responsive" alt="...."/>
<div class="figcaption">
<h2>Event Title</h2>
<p>Event Description.</p>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="events">
<img src="..." class="img-responsive" alt="...."/>
<div class="figcaption">
<h2>Event Title</h2>
<p>Event Description. </p>
</div>
</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="events">
<img src="..." class="img-responsive" alt="...."/>
<div class="figcaption">
<h2>Event Title</h2>
<p>Event Description. </p>
</div>
</div>
</div>
</div>
And on your CSS you just add the margin option on your class which in this example is "events" like:
.events{
margin: 20px 10px;
}
By this method you will have all the wanted space between your divs making sure you do not brake anything on your website's mobile and tablet versions.