Below is my code and i want the "portfolio1Info" div element row to be vertically adjacent with no space/margin to "portfolioSite" div element row. I have tried .noBottomMargin{margin-bottom:0px !important;}, .noTopMargin{margin-top:0px !important}. It doesn't seem to work and i always end up with a gap between image and the row that follows the image row
<div id="portfolio1" class="col-lg-4" style="border:solid">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.placekitten.com?" border="1" />
</div>
</div>
<div id="portfolio1Info" class="row">
<div class="col-lg-12">
<div style="background-color:#000000">
<h5 align="center"> Please hold 1? </h5>
<h6 align="center"><i> HTML? </i></h6>
</div>
</div>
</div>
</div>
#portfolio1Info h6 {
margin-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="portfolio1" class="col-lg-4" style="border:solid">
<div class="row">
<div class="col-lg-12">
<a href="www.placekitten.com" target="_blank">
<img class="img-responsive" src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.placekitten.com?" border="1" />
</a>
</div>
</div>
<div id="portfolio1Info" class="row">
<div class="col-lg-12">
<div style="background-color:#000000">
<h5 align="center"> Please hold 1? </h5>
<h6 align="center"><i> HTML? </i></h6>
</div>
</div>
</div>
</div>
If you want to stick that footer at bottom, then remove the space coming due to H6 tag, by default, your h6 has some margin.
Try this code
<style type="text/css">
#portfolio1Info h5 ,#portfolio1Info h6 {
margin-top: 0 !important;
}
</style>
It works well
It's not the .row, it's the <h5> in your second row. It has a margin-top of 10px.
Related
I have the following bootstrap code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<div class="row">
<div class="col-sm-1" style="background: red;">
1
</div>
<div class="col-sm-11 align-baseline" style="background: blue; padding-left: 0;">
<h6 style="background: green;">some title:</h6>
</div>
</div>
I want the bottom of the green h6 tag to be at the bottom of the blue 11-column div tag
Is this possible? i.e. the green h6 tag should be aligned to the baseline of the blue 11-column div.
You need to remove the default bottom margin of h6 and replace it with top margin:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-sm-1" style="background: red;">
1
</div>
<div class="col-sm-11 " style="background: blue; padding-left: 0;">
<h6 style="background: green;" class="mb-0 mt-2">some title:</h6>
</div>
</div>
</div>
Or align it using flexbox and margin-top auto (still need to remove the bottom margin)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-sm-1" style="background: red;">
1
</div>
<div class="col-sm-11 d-flex" style="background: blue; padding-left: 0;">
<h6 style="background: green;" class="mb-0 mt-auto w-100">some title:</h6>
</div>
</div>
</div>
This question already has answers here:
Remove padding from columns in Bootstrap 3
(26 answers)
Remove gutter space for a specific div only
(11 answers)
Closed 4 years ago.
I am trying to use bootstrap to create columns and rows to place my images however too much padding is being added around the images which is preventing my images from looking like the design:
This is how I structured my HTML:
<!-- header -->
<header>
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="col-md-12">
<img src="{!! $bg_image_col1_row1['url'] !!}" alt="{!! $bg_image_col1_row1['alt'] !!}" />
</div>
<div class="col-md-12">
<img src="{!! $bg_image_col1_row2['url'] !!}" alt="{!! $bg_image_col1_row2['alt'] !!}" />
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="col-md-6">
<img src="{!! $bg_image_co21_row1_col1['url'] !!}" alt="{!! $bg_image_co21_row1_col1['alt'] !!}" />
</div>
<div class="col-md-6">
<img src="{!! $bg_image_co21_row1_col2['url'] !!}" alt="{!! $bg_image_co21_row1_col2['alt'] !!}" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="container">
<h1>#php(get_field('front-page__title'))</h1>
<div>#php(get_field('front-page__slogan'))</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="col-md-9">
<div class="container">
<div class="zeo-cases-button">
#php(get_field('front-page__button--text'))
</div>
</div>
</div>
<div class="col-md-3">
<div class="container">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- /header -->
But this is resulting in this:
My question. Did I write the bootstrap elements correctly? How should I go about the padding in case the bootstrap elements are written correctly so that I can match the requirements of the design? Thanks a lot for your time!
Add the class no-gutters to each div class="row" to remove the spaces between the col-* elements
See the Bootstrap documentation about gutters.
<div class="row no-gutters">
<div style="background-color:#aaa" class="col-sm-3">a</div>
<div style="background-color:#bbb" class="col-sm-3">b</div>
<div style="background-color:#ccc" class="col-sm-3">c</div>
<div style="background-color:#ddd" class="col-sm-3">d</div>
</div>
Here a working jsfiddle that also removes the "visual padding" once the images doesn't fit 100% into the container.
Bootstrap : "The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns."
You should try to do :
<div class="row no-gutters">
<div class="col-6">
<img ... />
</div>
<div class="col-6">
<img ... />
</div>
</div>
Add below class hope it works for you.
.margin0-padding0 {
margin-left: 0px !important;
margin-right: 0px !important;
padding: 0px !important;
}
I have a bootstrap's panel-based web page made using bootstrap's grid system. The problema is, I have those extra spaces in the left and right side of the divs. Basically the contents are on the center. How do I remove this?
I tried using margin-top, margin-left, margin-right, bootstrap's pull-left and pull-right, margin and padding set to 0, width:100% etc nothing worked.
Here's a picture:
Look at the left and right sides, thise the white spaces i'm trying to remove. I don't know if this is something wrong with my CSS or my bad use of framework (I'm new to it) or some bootstrap's standard behavior that I'm not aware of. But I'd like to what's this and know how to remove this.
Here's my HTML (this is the full HTML of above image except with the master page's HTML of course):
<div class="row">
<div class="col-md-6">
<br />
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class = "panel-title">JUST HAPPEND, YOU KNOW</h3>
</div>
<div class="panel-body">
<p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<span class="date">15.40</span> CONTENTS GOES HERE... <p />
<input class='btn btn-success' type='submit' value="LET ME READ ALL THAT" title="READ MORE...">
</div>
</div>
</div>
<div class="col-md-6">
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">LAST NEWS</h3>
</div>
<div class = "panel-body">
<p />
MORE CONTENTS GOES HERE
</div>
</div>
</div>
<div class="col-md-6">
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">VIDEOS</h3>
</div>
<div class = "panel-body">
<div class="vid">
<iframe width="420" height="315"
src="https://www.youtube.com/embed/yWP6Qki8mWc?cc_load_policy=1"
frameborder="0" allowfullscreen=""
></iframe>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">MAY I HELP YOU?</h3>
</div>
<div class = "panel-body">
HELLO
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-primary">
<div class = "panel-heading">
<h3 class="panel-title">THE LIFE</h3>
</div>
<div class = "panel-body">
<div class="row">
<div id="links">
<div class="col-md-4">
<a href="http://4.bp.blogspot.com/-Piugr0fCCpE/UZLhWealhpI/AAAAAAAACUU/UzB5PWn__oA/s1600/passaros0031.jpg" title="Image 1" data-gallery>
<img src="http://4.bp.blogspot.com/-Piugr0fCCpE/UZLhWealhpI/AAAAAAAACUU/UzB5PWn__oA/s1600/passaros0031.jpg" alt="Image 1" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="http://2.bp.blogspot.com/-uk7UKQdsN5c/T_iX9EUDmuI/AAAAAAAABeA/4jpV4UmZjrM/s1600/passaros.jpg" title="Image 2" data-gallery>
<img src="http://2.bp.blogspot.com/-uk7UKQdsN5c/T_iX9EUDmuI/AAAAAAAABeA/4jpV4UmZjrM/s1600/passaros.jpg" alt="Image 2" class="img-responsive">
</a>
</div>
<div class="col-md-4">
<a href="http://1.bp.blogspot.com/_sz2fJjO1XW8/TIwpeTIHrcI/AAAAAAAAE7I/z9fD9BTwWyA/s1600/passaro_001.jpg" title="Image 3" data-gallery>
<img src="http://1.bp.blogspot.com/_sz2fJjO1XW8/TIwpeTIHrcI/AAAAAAAAE7I/z9fD9BTwWyA/s1600/passaro_001.jpg" alt="Image 3" class="img-responsive">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<br /> <br />
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
AAAAAAA
</div>
<div class="col-md-4">
BBBBBBB
</div>
<div class="col-md-4">
CCCCCCC
</div>
</div>
</div>
</div>
I'm assuming that you're trying to make your page full-width, rather than 1170px wide and centered, which is what the .container bootstrap class does. If that is the case, all you need to do is replace .container with .container-fluid:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
foo, bar, foobar
</div>
</div>
</div>
As I don't see any .container declarations in your excerpt, the changes should occur in your master page. Also remember that the number of columns per each .row should always amount to 12 (2 x .col-md-6, 3 x .col-md-4, etc).
CodePen
I found the problem: in bootstrap there is a rule
.container {
width: 1170px;
}
This causes the white gaps. To remove it, simply add width:100% to body-content in site.css
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
width:100%; //ADD THIS
}
Here is the proof: codepen
I want to know the proper way to put an image in the center of the page, and then beside the image vertical align 2 lines of text. should I put the image and text in one bootstrap coloumn or should i have the image in one coloumn and the text in a seperate coloumn. I know there are a few ways to do this, i just want to know the proper method.
<div class="row">
<div class="col-xs-9">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-xs-3">
<span style="font-size:48px;">Test</span>
<span style="font-size:24px;">Test second line. </span>
</div>
</div>
https://jsfiddle.net/k90s5fec/
This is the right way to do this
div{
display: inline-block;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-8">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-xs-4">
<p style="font-size:48px;">Test</p>
<p style="font-size:24px;">Test second line. </p>
</div>
</div>
This is the fiddle
NOTE : Use https:// when importing external resources,
use p tag instead of span if you want to use block texts.
use this
<div class="row">
<div class="col-xs-9">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" class="displa`enter code here`yed" />
</div>
<div class="col-xs-3">
<span style="font-size:48px;">Test</span>
<span style="vertical-align:middle; line-height: 30px;">Test second line. </span>
</div>
</div>
img.displayed
{
display: block;
margin-left: auto;
margin-right: auto
}
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-8">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div style="font-size:48px;">Test</div>
<div style="font-size:24px;">Test second line. </div>
</div>
</div>
I am using Skeleton Framework, and the layout I made using the grid system is like this:
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="three columns">
<br>
</div>
<div class="six columns" style="margin-top: 25px">
<img src="img/okay.jpg" width="50px" style="display:inline"/>
<p id="title" style="display:inline">{{title}}</p>
<p id="excerpt" style="display:inline">{{description}}</p>
<div id="describe me" style="display:inline"><span style="display:inline">{{name}}</span><span style="display:inline">{{date}}</span></div>
</div>
<div class="three columns">
<br>
</div>
</div>
</div>
It shows something like this:
But what I want is something like this:
How can this be achieved?
Result:
Responding to your code, although there are many alternate solutions for this, maybe even in their documentation.
First, try to avoid using inline styles.
Wrap your content inside a
class.
Vetical align the image to the top.
Remove the default margin
on the paragraph items.
.desc {
display: inline-block;
}
.desc p {
margin-bottom: 0;
}
.six img {
vertical-align: top;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="three columns">
<br>
</div>
<div class="six columns">
<img src="http://placehold.it/50x75" width="50px" />
<div class="desc">
<p id="title">{{title}}</p>
<p id="excerpt">{{description}}</p>
<div id="describe me"><span>{{name}}</span><span>{{date}}</span>
</div>
</div>
</div>
<div class="three columns">
<br>
</div>
</div>
</div>