I want to align my button horizontally with text area,like this image
Currrent code:
<div class="container">
<div class='row'>
<div class="col-sm-1">
<img style="border-radius:50%;width:70px;height:70px;" src="https://images.discordapp.net/avatars/<%=user.id%>/<%=user.avatar%>.png?size=512">
</div>
<div class="col-sm-11">
<textarea style='width:70%;height:100%' placeholder='Leave a review for this shop'></textarea>
</div>
<div style="margin-top:5px;margin-bottom:5px;width:70%;display: flex;justify-content: space-between">
<div>
<span class="review" data-rating="0"></span>
<br>
Please make sure to check our review guidelines before posting.
</div>
<button class="button_div" style="width:auto;display:block;margin-left: auto;margin-right: 0;" >Post Review</button>
</div>
</div>
</div>
The total screen size is 12. you gave the image col-sm-1, and you gave the textfield col-sm-11 that takes up the entire column, you have to reduce col-sm-11 for the textfield to something else so that the preview bottom can fit.
Or
You can add the preview button into the same div as the textfield.
Related
I have to make a User Page for our club website, but I am using Materialize CSS instead of Bootstrap. I am having a hard time making it responsive. My content gets displays weirdly, text goes out of the box and buttons get glued together.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="container">
<div class="row">
<div class="col s12">
<div class="card horizontal hoverable" style="background: rgba(0, 0, 0, 0.3)">
<div class="card-image">
<img src="https://static.makeuseof.com/wp-content/uploads/2013/09/IE-automation8.png" style="width: 300px; height: 300px;">
</div>
<div class="card-stacked grey-text text-lighten-1">
<div class="row">
<div class="card-content" style="margin-top: -30px;">
<h3 class="light-blue-text"><b>Username</b></h4>
<p style="margin-top: -10px;">Developer</p>
<br>
<br>
<h5><b>Area of Interest</b></h4>
<p>HTML</p>
</div>
</div>
<div class="footer" style="margin-left: 5px; margin-bottom: 5px;">
<span><button class="btn #0d47a1 blue darken-4"><i class="fab fa-linkedin"></i> LinkedIn Profile </button></span>
<span><button class="btn #e65100 orange darken-4"><i class="fa fa-graduation-cap"></i>Profile </button></span>
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/devarshirawal0111/oj3nxLat/8/
Above link I have removed all attempts I made to make it responsive.
There were quite a few parts in your code that strayed from the materialize suggested structure.
1) In general, until you are familiar with what component you're working with, stick to the code samples:
<div class="row">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/100/190/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</div>
Cards live in cols, which live inside rows.
2) Use card-action as your card footer, not .footer
There is no .footer class for cards. It is called .card-action:
<div class="card-action">
This is a link
</div>
3) Use .btn to give any element a button style:
<a class="btn" href="#" target="_blank"><i class="fa fa-graduation-cap"></i>Profile</a>
You had span > button > a - this is not necessary. Keep it simple. Any element can be made to look like a button just by adding .btn. Also, if your button text is too long, it will spill out or cut off. Not good. Make sure you're not putting unnecessary extra text into buttons. I took out the word 'profile' from linked in, the other solution would be to decrease font size or switch to a standard card to give more room for the footer.
4) Be careful what restrictions you're putting on your images, and also a standard card (image up top) can often work better. To make your image work better responsively, I took off the 300x height and instead gave it height:100% and object-fit:cover, which will fill the space better (object-fit is not supported in IE)
5) Lastly, gave your a tags a little margin so they have spacing when stacked on mobile.
Updated codepen here.
EDIT:
Added a second card example using Card Image, which places the card image at the top of the card.
https://materializecss.com/buttons.html
https://materializecss.com/cards.html
The problem is when the page extend the scroll does not appear
I have a problem with this code
<div class="yui3-lightbox act-auth-lightbox">
<div class="yui3-lightbox-content" style="max-width: 448px;">
<a class="zsg-icon-x-thin lightbox-close" title="Close" tabindex="-1"></a>
<div class="lightbox-body zsg-tooltip-viewport">
<div class="tooltip-dest">
<div id="strength-tooltip"></div>
</div>
<div class="user-account login">
<div class="module-wrap">
<div class="module-head">
<h2>مرحبا بكم في فرص</h2>
</div>
<div class="module-body">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-lightbox-mask act-auth-lightbox" style="display: block;"></div>
</div>
</div>
</div>
</div>
As in the following:
Screenshot 1
Screenshot 2
I suspect the lightbox is setting itself up to occupy the entire view using position: fixed (or something similar), and setting overflow: hidden to clip anything that doesn't fit. Assuming that's the case, your document is not exceeding the bounds of the window, hence no scrollbar.
My website shows different articles each in one thumbnail.
The problem is that the thumbnails seems to float everywhere. They are not aligned as it should be.
This is how my HTML code looks like.
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<br></br>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="[PIC]" width="300" />
<div class="caption">
<h3>
[Name]
</h3>
<p>
[Text]
</p>
<p>
<a class="btn btn-primary" href="index.php?action=DETAILE&id=[ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The result is that the columns are not aligned. There are 3 columns next to each other, but the height differs, as well the position on the page.
How can I solve this?
Now it looks like a staircase like in the code with the
I want:
Box 1. Box2. Box 3.
Bootstrap 3 column layout will be like
<div class="col-md-12">
<div class="row">
<div class="col-md-4">.col1</div>
<div class="col-md-4">.col2</div>
<div class="col-md-4">.col3</div>
</div>
</div>
To maintain equal height for all boxes assign equal height for all images,h3 and p tags(which are in the box)
Example snippet https://bootsnipp.com/snippets/featured/store-product-layout
and in your html code there are many closing < /div> tags check html validations once.
I have this:
<div class='container'>
<div class='row'>
<div class="col-md-5 col-sm-4 col-xs-12">
text goes here
</div>
</div>
<!--//col-->
<div class='col-md- col-sm-6 col-xs-12'>
<div class='text-center'>
image goes here
</div>
</div>
</div>
Pictures will tell what I'm trying to do better. Here is what it looks like right now:
bad-pupper.png
It's lined up properly but it doesnt look good. I want to match the center of the image to the text instead.
good-pupper.png
How should I do this?
You could wrap the two content divs inside a new div. The new div you'll give a height, line-height. That way you can use vertical-align which will center the image the way you wanted
just add padding-top:somepixel to your text div
like below
.text-center {
padding-top:15px;
}
Yes You can do that,
Check this fiddle here
Sample HTML
<div class="container">
<div class="row">
<div style="display:table;">
<div style="display:table-cell;vertical-align:middle;">
<div style="margin-left:auto;margin-right:auto;">
<p>This is heading</p>
<img src="https://unsplash.it/200" alt="">
</div>
</div>
</div>
</div>
</div>
Respective CSS
p,img {
margin:20px;
display:inline-block
}
For your reference : Checkout this link
i have the following:
"
<div class="container">
<div class="row">
<div class="col-md-3">
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div class="col-md-offset-10">
<h6 id="dateTime">23/07/2015 12.00</h6>
</div>
</div>
</div>
</div>
<div class="panel-body">
</div>
<div class="panel-footer"></div>
"
Using only bootstrap, is it possible to center the two vertical labels of different dimensions (Current Job and Date) contained in Header panel (that contains a grid) and how to do it?
You need to alter the CSS for the following containers:
<div class="col-md-3"> and <div class="col-md-offset-10">
Giving both containers float: none; and margin: 0 auto will definitely center both. If you want the text to be centered as well, add some text-align: center
That should have you covered.
Sorry, forgot to mention that the container <div class="col-md-offset-10"> needs to match the width of the other container (25%).
You can do this by removing classes from your div tags for labels and giving text-center class to div with class row. This will make both labels appear in the middle of the page and one after another vertically. this is what your code container will look like:
<div class="container">
<div class="row text-center">
<div>
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div>
<h6 id="dateTime">22/07/2015 12:00:00</h6>
</div>
</div>
</div>