I'm trying to display a vertical list of buttons composed of merged text and images. I'm using position:relative and position:absolute to merge the text with the image.
<div class="well">
<div style="position:relative;">
<img src="assets/launch_item.png" style="position:absolute;"/>
<div style="position:absolute;padding: 16px 0px 0px 55px;">
<h5 style="float:left;width:300px;">Option1</h5>
<div class="btn btn-success">Go</div>
</div>
</div>
<div style="position:relative">
<img src="assets/launch_item.png" style=position:absolute;"/>
<div style="position:absolute;padding: 16px 0px 0px 55px;">
<h5 style="float:left;width:300px;">Option2</h5>
<div class="btn btn-success">Go</div>
</div>
</div>
</div>
The combined button turns out OK but there seem to be problems arranging the buttons in the parent window. As seen on the image above, only one of the two buttons gets displayed. Moreover the button gets slapped on to the existing window instead of "fitting into it". How can I fix that?
Remove the float inside the h5 and control it with the position, as you have already made a relative positioning for the parent Div, so I suggest creating the elements inside it with absolute positioning like what you have done for the rest of your elements. Hope this helps.
EDIT
Here is the Solution.
The Updated Code:
<div class="well" style="position:relative;">
<div style="width:300px;">
<img src="assets/launch_item.png" style="position:absolute;"/>
<div style="position:absolute;padding: 8px 0px 0px 55px;">
<h5 style="width:300px;position:absolute;">Option1</h5>
<div class="btn btn-success">Go</div>
</div>
</div>
<div style="width:300px; left:305px; top:0; position:absolute;">
<img src="assets/launch_item.png" style="position:absolute;"/>
<div style="position:absolute;padding: 8px 0px 0px 55px;">
<h5 style="width:300px;position:absolute;">Option2</h5>
<div class="btn btn-success">Go</div>
</div>
</div>
</div>
Hope this helps.
EDIT - 2
Usually for menus, UL and LI play a vital role. Considering your code with a position has no problematic effects, just that list items are more useful for these stuff. Providing you with a new solution with list items as vertical menu. This is like a further reference for you to know about the creation of menu styles with list items. Hope this helps.
This resource was used during the research for the list items creation with vertical menus.
Hope this makes your work easier. :)
Apply overflow:hidden to the div with class well so that the buttons will be fitted into that parent div.
Related
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
I want to acomplish something like this:
And so far after hours of learning bootstrap and playing with the grid system I managed to do this:
Code that I use:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<div class="row-fluid">
<div class="col-md-4">
<img class="img-responsive" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUxMDc1OTAzM15BMl5BanBnXkFtZTgwOTMwOTMyMDI#._V1_SY1000_CR0,0,674,1000_AL_.jpg" style="width: 130px; height: 200px">
</div>
<div class="col-md-8">
<div class="row">
<div class="text-title">Logan 2017</div>
<p>
Set in the future, Logan and Professor Charles Xavier must cope with the loss of the X-Men when a corporation lead by Nathaniel Essex is bent on destroying the world. With Logan's healing ...
</p>
</div>
<div class="row">
<button class="btn btn-warning btn-bold-text">IMDb</button>
<button class="btn btn-danger pull-right"><span class="glyphicon glyphicon-remove"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see, I want to be able to maximize the picture to the size of the panel, make buttons stick to bottom and fix the margin of the text.
Can someone help me ? Thanks!
I don't need anyone to do the code for me, just tell me what should I be looking for. Is there any spacing between columns in bootstrap ? I tried playing with margins and paddings but no chance of acomplishing what I want.
https://jsfiddle.net/0jv537r0/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="well" style="position: relative; background: #fff;">
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="https://images-na.ssl-images-amazon.com/images/M/MV5BMTUxMDc1OTAzM15BMl5BanBnXkFtZTgwOTMwOTMyMDI#._V1_SY1000_CR0,0,674,1000_AL_.jpg">
</div>
<div class="col-xs-8">
<div class="text-title">Logan 2017</div>
<p>
Set in the future, Logan and Professor Charles Xavier must cope with the loss of the X-Men when a corporation lead by Nathaniel Essex is bent on destroying the world. With Logan's healing ...
</p>
</div>
</div>
<button class="btn btn-warning btn-bold-text" style="position: absolute; bottom: 20px; left: 33.33333333%;">IMDb</button>
<button class="btn btn-danger pull-right" style="position: absolute; bottom: 20px; right: 20px;"><span class="glyphicon glyphicon-remove"></span></button>
</div>
</div>
</div>
</div>
So, I changed it to a well instead of a panel since you wern't actually using any of the panel elements other than the border. My answer isn't 100% full proof, you'd want to bring the styles not inline and add specifics for different screen widths, but in a nutshell at least you can see what I did to accomplish your goal. You could also use flexbox and then keep the buttons inside the col-xs-8 because with felxbox you could make the height of the col-xs-8 element match the height of the image.
Your "problem" is a commong one. Placing elements at the bottom of a parent element. There is generally not an out of the box solution to accomplish this. You must use position absolute. This position elements based on their closest non static parent. You could do this on the col-xs-8 element but because it's height won't match that of the image, that won't work you need to move the buttons outside the column. (Columns by default in Bootstrap have a non static position).
Now there are countless ways to accomplish what you wanted I just chose the route closet to what you had. I might suggest the media object (http://getbootstrap.com/components/#media) native to bootstrap. Wrap the media element in a wrapper with a border and you should be close to what you want, but really, media, panel, wells they are all similar. That is why in Bootstrap 4 they have all been removed in favor of cards. You might be better off going with BS4 as well. It's getting closer and closer to release and I have a site fully done with the current alpha and it's pretty solid. We're about to push the project to production too.
I'm facing I think odd problem. I have website http://www.spacemind.ggpro.pl/ar/ and I'm trying to make this top menu (black rectangle) Stick to the left side of my Wrapper div.
<div style="z-index:9999;background-color:#000;right:0px;width:80%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
Now I use value width:80% but I hope that there is some way to stick it to left side of wrapper. I want this menu to be always (no matter what resolution user uses) in the position as in the image below: http://i.stack.imgur.com/QMLvO.jpg
Try this code:
<div style="width:980px;margin:auto;position:relative;">
<div style="z-index:9999;background-color:#000;right:0px;width:100%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
</div>
Of course inline styling is a bad idea. You should put it in some classes.
To the first div that comes immediately after your body tag assign the following property:
left: 0;
I am trying to have my bootstrap 3.0 layout pin the content of the right column to the top, thus staying in place as the main content scrolls on. I have arrived at the following code, which blows up as I re-size the browser. Is there a way to do this?
<div class="col-md-10>main content</div>
<div class="col-md-2 container" style="padding: 15px 0px 10px 23px; position: fixed; right: 20px; top:75px">
Right column, stuck to the top
</div>
I am not really (engineer learning these techniques) a bootstrap or CSS guy, so if bootstrap doesn't support this - that is valuable information for me as well.
You can use affix on the content inside the right column..
<div class="col-md-10>main content</div>
<div class="col-md-2">
<div class="affix">..</div>
</div>
Here's an example Bootply that you may find useful: http://bootply.com/104413
Demo
You can do this by using the affix class.
<div class="well col-span-4" data-spy="affix">
<div class="btn btn-large btn-danger col-span-12">This is fixed</div>
</div>
Animation
I Need the right Column elements to be flush with the javascript back button image. Not sure what the deal is, I have tried clear left, clear right, and clear both.
Live Example:
http://newsite.702wedding.com/las-vegas-marriage.asp
Any Help Would be Great.
Change the code which looks like this:
<div class="package-back-button1"></div>
<div class="clearfloat-left"></div>
<div class="win-this-package1"></div>
into this:
<div style="float: left">
<div class="package-back-button1"></div>
<div class="win-this-package1"></div>
</div>
So, remove the .clearfloat-left div, and enclose the two items inside a div with float: left.
A kinda yucky (but easy) fix is to do this:
On .package-right-box1, add margin-top: -89px.
Tested in Firefox, IE7/8.
Here is a solution on jsfiddle. Code is below.
<!--Left Column Boxes-->
<div style="width:50%; float:left">
<div style="background-color:#f00; width:100%">left1</div>
<div style="background-color:#0f0; width:100%;">left2</div>
<div style="background-color:#00f; width:100%;">left3</div>
</div>
<!--Right Column Boxes-->
<div style="float:right; width:50%">
<div style="background-color:#aaa; width:100%;">right1<br />
<div style="background-color:#ff0; width:100%;">right2</div>
</div>
<div style="background-color:#0ff; width:100%;">right3</div>
</div>
Also, be aware that your second div on the right was nested within the top-right div. I'm not sure that was intended, but am just pointing it out.