Situation
Using Boostrap v4, and when I add a background colour to a div, the element appears to become unaligned with all other elements in their columns. I have applied box-sizing: border-box yet it isn't staying within its container. Never had this issue before.
Aim
To keep the element within its column
HTML
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<section class="container padding-bottom--md">
<div class="row">
<div class="col-md-6 bg--orange text-md-center padding-bottom--md padding-top--md">
<h5 class="text-uppercase txt--white">Lorem Ipsum</h5>
<p class="txt--white no-margin-bottom">A load of pish posh text</p>
</div>
<div class="col-md-6 bg--orange text-md-center padding-bottom--md padding-top--md">
<h5 class="text-uppercase txt--white">Lorem Ipsum</h5>
<p class="txt--white no-margin-bottom">A load of pish posh text</p>
</div>
</div>
</section>
CSS
* { box-sizing: border-box; }
.padding-top--sm { padding-top: 1rem; }
.padding-bottom--sm { padding-bottom: 1rem; }
I found a way to solve the issue. Add a second inner div to hold the content without any padding.
HTML
<section>
<div class="container">
<div class="row">
<div class="col-md-12 bg--white text-md-center padding-top--md">
<div class="bg--orange padding-info-inner-md">
<h5 class="text-uppercase txt--white">Resource centre</h5>
<p class="txt--white no-margin-bottom">Got a question? Have you checked our knowledge bank and help guides?</p>
</div>
</div>
</div>
</div>
</section>
CSS
.bg--orange { background: #e64b3c; }
.bg--white { background: #FFFFFF }
.padding-info-inner-md { padding: 2rem; }
Related
I am developing an application using Vue.js and Bootstrap. I am looking to develop a folder to look like this:
But, I am unable to align the contents to make sure that it looks like in the above picture.
The picture currently looks like this:
Here is the code:
<div class="col-xl-3 col-md-6">
<stats-card>
<div slot="header" class="folderRectangle">
<div class="row">
<div class="col-3">
<div class="clearfix">
<i class="material-icons" id="folder-image">folder</i>
</div>
</div>
<div class="col-9">
<div class="clearfix" style="position: relative">
<div>
<p style="text-align: left">Folder Name</p>
</div>
<div>
<p style="text-align:left">20 files</p>
</div>
</div>
</div>
</div>
</div>
</stats-card>
</div>
What wrong am I doing? How do I make sure that the folder icon aligns to the top and text floats to the center?
Instead of using .row and .col-*, you can use the media object already available in Bootstrap to produce this layout.
/* demo only */
.media {
border: 1px solid #ddd;
padding: 1.5rem;
margin: 1rem;
}
img {
max-width: 25px;
}
.media-body {
font-size: 0.75rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="media">
<img class="mr-3" src="https://png.pngtree.com/element_our/png/20181213/folder-vector-icon-png_267455.jpg" alt="Generic placeholder image">
<div class="media-body">
<h6 class="mt-0 mb-1">Folder name</h6>
<div>20 files</div>
</div>
</div>
The best possible way to achieve what you are trying is to use CSS Flex property.
Just give display flex to the parent (col-9) in your case.
Provide align items to be center.
and at last flex alignment to row.
this will make you achieve the above design
You can read about CSS flexbox more here
https://www.w3schools.com/css/css3_flexbox.asp
Good day, as the title says, I am having issues with aligning the text in the exact center of my image. I tried adding a class with the css vertical-align:middle with no effect. Also, I tried using the span class to surround the text that will be centered. Both the image and the text are encased in a bootstrap grid. Any help will be appreciated thank you.
HTML/Bootstrap:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="img/mission-mywhitecard.jpg" class="img-responsive align_text">
</div>
<div class="col-md-9 justify_text">
<span>
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
</span>
</div>
</div>
</div>
CSS:
.align_text {
vertical-align: middle;
}
Considering you are using bootstrap4, you can achieve that using the class .align-items-center, or use display:flex as stated by others :)
img {
background: gray;
height: 250px;
display: block;
max-width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-3">
<img src="img/mission-mywhitecard.jpg" class="img-responsive align_text">
</div>
<div class="col-9 justify_text">
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and
friendly access to health, wellness and beauty.”</p>
</div>
</div>
</div>
I believe this produces what you ask for. It is using 2 flexboxes:
First one (.row) to put the image and text next to each other in a responsive way;
Second one (.col-md-9) to position the span in the center
html,
body {
width: 100%;
}
.row {
display: flex;
width: 100%;
}
.row>* {
flex: 1; /* Allow the flex items to grow and shrink */
}
.col-md-9 {
display: flex;
justify-content: center;
align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="https://via.placeholder.com/100x300" class="img-responsive align_text">
</div>
<div class="col-md-9">
<span>
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
</span>
</div>
</div>
</div>
You can aslo use align-self-center in column div class without any height of image and other css also add larger image no design change when you use align-self-center in column div no need set image height
.align_text {
vertical-align: middle;
}
img {
max-width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="http://placekitten.com/1000/500" class="img-responsive align_text">
</div>
<div class="col-md-9 justify_text align-self-center">
<span>
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
</span>
</div>
</div>
</div>
Currently on my page I have this layout
<div class="card">
<div class="card-block">
<h4 class="card-title text-muted">UltimateWarrior15</h4>
<h6 class="card-subtitle text-muted">
Adventurer card
</h6>
</div>
<img data-src="holder.js/100px180/?text=Image">
<div class="card-block">
<div class="form-group row">
<label for="player-level-text" class="col-xs-2 col-form-label">Rank</label>
<div class="col-xs-10">
<label class="form-control text-muted">D</label>
</div>
</div>
</div>
</div>
It gives pretty simple result
But what I want to achieve is to move rank value from label formatted similar to input to some image asset or maybe just label with bigger font, that would overlap image like this
How to achieve this using HTML and CSS?
Sample
https://jsfiddle.net/46qnx1LL
You can achieve this with a simple negative margin, e.g. margin-top: -75px;. With setting the border: none; and background: transparent; only the font is visible. Now you only need to apply text-align: right; to the parent div and your letter is on the right side.
Here is an example:
.card-block .col-form-label {
display: none;
}
.card-block > .row > div {
text-align: right;
}
.card-block .text-muted {
border: none;
background: transparent;
font-size: 4em;
font-weight: bold;
margin-top: -75px;
color: black !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<div class="card-block">
<h4 class="card-title text-muted">UltimateWarrior15</h4>
<h6 class="card-subtitle text-muted">
Adventurer card
</h6>
</div>
<img data-src="holder.js/100px180/?text=Image">
<div class="card-block">
<div class="form-group row">
<label for="player-level-text" class="col-xs-2 col-form-label">Rank</label>
<div class="col-xs-10">
<label class="form-control text-muted">D</label>
</div>
</div>
</div>
</div>
You can apply the CSS position:relative; and then specify an offset such as top:-50px;left:-20px; which would shift the element 20 pixels to the left and 50 pixels up. You can also specify right and bottom and use positive or negative values.
If you find that the element is hidden underneath another element, then you can move it up to a higher layer by specifying the z-index:layer number; so that the element is positioned on the right layer.
JS Fiddle
This is similar to the layout I'm trying to achieve:
The code I have now
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row ">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
I have tried using CSS class "no-padding" and also tried playing around with margins. when i apply 0 padding, the left side of the first image touches the edge of the browser( this is desired), however the other edge(right side of image) still has some empty space.
How do I get rid of that empty space get the results like the reference layout?
.col-md-6{
padding-right: 0px;
padding-left: 0px;
}
There could be an issue with the <p> padding/margin, could also be an issue with the <img> padding/margin. However it seems to be an issue with the sizing of the elements within the row.
I did however seemingly fix the issue in my PEN HERE
I added a height: *** to the row class, this may be needed for desired results as you are using row-eq-height bootstrap class.
HTML
<div class="row ">
<div class="col-lg-6 row-eq-height push-right">
<img src="1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 row-eq-height">
<div class="eq-row-text ">
<p class="row-text">Text description for image </p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 row-eq-height ">
<div class="eq-row-text ">
<p class="row-text"> Text description for the image </p>
</div>
</div>
<div class="col-lg-6 row-eq-height">
<img src="1.jpg" class="img-responsive">
</div>
</div>
CSS
p{
margin: 0;
padding: 0;
}
img{
margin: 0;
padding: 0;
}
.row {
margin: 0;
padding: 0;
height:60px;
background-color: #eee
}
If using the LESS/SASS source: change #grid-gutter-width in the variables file to 0
If you want to get rid of the white space you will need to make your image bigger to span the cols. You can manually adjust the width of an image using css:
img {
width: 100%;
}
I am having problem with the bootstrap rows, where I am getting more white space at top and bottom of the rows, which I need to remove, I want the row to have just the height of the text present inside it...
HTML is given below :
<div class="row">
<div class="col-sm-6 text-muted">
<p>Author</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>abcd</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>Date Created</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Nov 28, 19:30</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>File Type</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Microsoft Word</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>Last Modified</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Dec 08, 11:00</p>
</div>
</div>
All you need to do is add the following CSS to your code:
.row-divider {
height: 1px;
margin: 0px;
overflow: hidden;
background-color: #e7eaec;
}
p {
margin: 0;
padding: 0;
line-height: 1;
}
You basically tell all your paragraphs to have 0 margins so the line height is equal to the text height.
On a different note, you might want to use text-muted class on the <p> tags instead of the whole <div> that contains those <p> tags. Why? because for example tomorrow you will add two more lines to that div that wouldn't need to be text-muted, you would need to define a new class to cancel those values.
Style the things you need and only those.
If you want the left text and right text on the same line in Jsfiddle just change the col-sm-x class to col-xs-x class, basically, jsfiddle view is a bit small and that's why you see two lines.
You have to set:
p{
margin: 0;
line-height: 14px; /*you can reduce this value to achieve what you want*/
}
Here a JSFiddle example to play with
Note that .row-divider has margin: 9px 0px if you want you can reduce it to closer to the text above it.
Check this out for more information about line-height http://www.w3schools.com/cssref/pr_dim_line-height.asp
p{
margin: 5px 0px;
}
.clearfix {
zoom: 1;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
use clearfix class with row.