I'm coding a website using bootstrap 4 and for some reason that I cant figure out, there is some space between my two wrapper div's in the following code.
<!-- News! Ad with "read more" modal popup -->
<div id="news-bar" class="container-fluid bg-white my-0">
<h2>News</h2>
<p>Short Description</p>
<p>more</p>
</div>
<!-- About us / Register for consultation -->
<div id="about-jumbotron" class="jumbotron jumbotron-fluid bg-dark text-white margin my-0">
<div class="container-fluid">
<h1>Big Heading</h1>
<h2>Smaller heading</h2>
<p>Description text</p>
</div>
</div>
Here is an imgur link with a photo of my browser output. Sand brown line is the background-color set for my webpage.
So far I've tried adding my-0 and py-0 to both #about-jumbotron and #news-bar with no success. Also, if i click on the empty space and select inspect element in my web browser it refers to the body tag. As an alternative solution I can set the background color to be the same as one of the div elements but I do want to first try to find a proper solution.
I solved it. The problem was that the the h1 and h2 elements had their own margins pushing the bottom downwards. it was fixed by setting my-0
Related
My site is a bootstrap 5, Jekyll-built site using a template I created. I have a div that houses post title, nd a few components from a %include% file.
`
<div class="col-md-12 col-sm-12">
<div class="p-3 border rounded-1 bg-light">
<h1 class="display-5 mb-1 lh-1">{{ page.title }}</h1>
<div class="mb-4">
<p class="mb-0 text-muted fs-6 float-start">andresanz.com / blog / {% include meta.html %}</p>
</div>
</div>
</div>
</div>`
When I look at the site via phone/inspector in Chrome, the text blows out the bottom of the container:. I've tested and the same happens with an IMG file as well:.
Thanks for looking # https://andresanz.com/blog/ to see what I'm talking about.
I've tried changing alignment and push/pulls to no avail. I was expecting to have the bottom of the bordered-div pushed downward to contain the text. I looked at Bootstrap flex layout - div in main section not expanding to fill its parent and it didn't help...
I have been adding , and elements to my demo portfolio, just to practice what I've learnt so far, but it seems that these tags mess up the "container" class from bootstrap.
initial version without accessibility tags
<!-- <header> -->
<div class="container">
<div class="hl1"></div>
<div class="row">
<div class="col-12 p-3">
<div class="card mx-auto" style="width: 18rem;">
<img src="./portrait2.jpg" class="card-img-top" alt="My Portrait">
<div class="card-body">
<p class="card-text">Hello there! This is me!</p>
</div>
</div>
</div>
<div class="hl1"></div>
</div>
<!-- </header>
As you can see, I've commented out the tag for the moment. After I add the header, article and footer tags, the content swaps out of the container class and the (hr)tag goes across the total width of the page.
The good part is that the content remains at the same location, like only the (hr)tag would be affected by the tags.
My question is there a way to overcome this? Or I should forget the accessibility tags for now, until I become more advanced in knowledge.
Thanks.
It'd be better if you could provide the entire code. Although, you can check if your Bootstrap CDN link is BELOW the link to your external stylesheet. This makes sure that the Bootstrap properties are prevalent over anything you have defined in your stylesheet.
I'm trying to create a header in bootstrap 4 like this:
I'm facing several problems with this approach. Firstly the logo is not properly centered to the middle. I've tried several methods to avoid this including align=middle, margin on the bottom (which adds more space on the bottom than the space that's already on top-side) and the grid-system with col-1 and col-9. The last one creates to much space between the logo and the heading.
The image includes the version which contains the image in the HTML h1 element. Here is the source to create the logo:
<h1 class="display-4 bg-primary text-light">
<img src="https://via.placeholder.com/64x64" width=64 height=64 />Some text
<small class="text-white-50">
The new way of doing text-research</small></h1>
Am I doing something wrong? Bootstrap examples with an included logo are very rare. Maybe it has a reason...
Additional information
The small text shouldn't be centered.
I want to achieve this with bootstrap utilities only.
Use a flexbox for all items. Don't put the image and text inside the h1.
div {
display: flex;
align-items: center/* vertical alignment */
}
small {
font-size: 1rem;
}
<div>
<img src="https://via.placeholder.com/64x64" width=64 height=64 />
<h1 class="display-4 bg-primary text-light">Some text<small class="text-white-50">The new way of doing text-research</small></h1>
</div>
Since there is no html posted i am going to assume you have bootsrap basics in place:
Assuming you have something like this
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 header">
<span>
<h1 class="display-4 bg-primary text-light">
<img src="https://via.placeholder.com/64x64" width=64 height=64/>
some text
<small>The new way of doing text-research</small>
</h1>
</span>
</div>
</div>
</div>
EDIT: REMOVED CUSTOM CSS
PLease note that having the html in this way is not recommended.
But if you are insistent that you not use any custom css this solution should solve the problem.
I hope this is what you are looking for.
Check updated code pen https://codepen.io/Jsilvestri/pen/vzzJRy
This is my html code:
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin:0;">
<article>
<img src="http://placehold.it/1000x500" class="img-responsive" alt="">
<div class="content">
<h3>Title</h3>
<p><i class="fa fa-calendar-o"><small> 1 June</small></i> <i class="fa fa-clock-o"><small> 11:45 PM</small></i></p>
<p>For many individuals and businesses developing a strong social media presence is a cornerstone of their digital strategy, so prioritising social media.... <font color="#88c78a">Read More</font></p>
<div class="pull-right"><i class="fa fa-eye"></i> <small> 400 Views</small></div>
<div class="pull-left" ><i class="fa fa-thumbs-up"></i> <small> 400 Likes</small></div>
</div>
</article>
</div>
<!-- End Row -->
</div>
<!-- End Container -->
</div>
My div currently looks like this:http://s13.postimg.org/fdis1mxyv/div.png
If you go through the image then you will see that there is some space from left and right green margin. I want that space to go away.
Which attribute of div will help do this thing?
The attribute in the css that makes that it writes the content of the child objects is the attribute called "padding". There is 5 types of different paddings :
padding=*X*; Makes the content to be wrote with a margin at every side
padding-top:*X*; Makes the content to be wrote with a margin from the top
padding-left:*X*; Makes the content to be wrote with a margin from the left side
padding-right:*X*; Makes the content to be wrote with a margin from the right side
padding-bottom:*X*; Makes the content to be wrtoe with a margin from the bottom
And then, you can play with these in CSS by specifying only the ones that you want (the number X is either in px or in %. e.g.: padding-top:10px;)
So for your you have to search the child parent class that contains the childs you want to be aligned to the div, and you change the value :
.parent
{
padding:*X*px;
//or padding-top, padding-left, padding-right, padding-bottom, in fonction of wich one you want
}
Here is a snippet to show you an example :
.parent_no_padding
{
padding:0px;
}
.child_no_padding
{
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
}
.parent_with_padding
{
padding:20px;
}
.child_with_padding
{
padding:20px;
}
<table border="1"><tr><td>
<!-- Only for the look -->
<div class="parent_no_padding">
<h3>Title here</h3>
<div class="child_no_padding">
<p>Content of the child</p>
Write a little sentence here to make some content (without padding)
</div>
</div>
<br/></td></tr><tr><td>
<div class="parent_with_padding">
<h3>Title here agagin</h3>
<div class="child_with_padding">
<p>Content of the child</p>
Write a second little sentence (with padding)
</div>
</div>
<br/></td></tr><tr><td>
<div class="parent_with_padding">
<h3>Title here over and over</h3>
<div class="child_no_padding">
<p>Content of the child</p>
Write a last little sentence (parent with padding but child without padding)
</div>
</div></td></tr></table>
Hope this helps ! (don't forget to check an answer if it's right, to help other people to see what works)
I want an image to stay exactly on the left side of the screen(fix it to the left side). I want the image to "start" from the screen's side. I managed to do this with
position:fixed; left: -15px;
and it works from the viewpoint of the image, it starts at the screen's left side exactly on every screen I tested.
BUT it ruins other things, namely the text on the same row will be on top of the picture, AND if I decrease the windows/screen size it will become more of a mess with the text.
What's a better solution?
My code:
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="img/img1.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/logo.png">
</div>
</div>
I want the first picture, so img1.png to be on the left, the title should be in the middle, and the logo.png on the right. The second image, the logo.png doesn't need to be fixed to the right, just img1 to the left.
I tried to provide the all the info you need, but I'm new here so please tell me if there's anything more you need!
Thank you in advance!
EDIT: Added fiddles.
As you can see, the black image does not start at the screen's left side exactly here:
http://www.bootply.com/bGJhH27MQO
The next fiddle shows you how the black image should be positioned, but it ruins the site:
http://www.bootply.com/sFeKODGOSq
Actually, your html almost works. As you found out, using a fixed position within Bootstrap's grid system doesn't work very well.
Rather than trying to fix the <div> to the left edge, you should try fixing the image to the left edge. You don't need to use absolute positioning to do it. You can use a negative margin-left value to shift the image to the left. See updated code below
#swoosh {
margin-left: -15px;
}
<div class='container-fluid'>
<div class="row outerDiv">
<div class="col-xs-3 col-md-2 imageDiv" >
<img class="img-responsive" id="swoosh" ...
The actual value of the margin-left value is a little fuzzy. The value of -15px is to offset the padding-left value in the Bootstrap's col-xxxx classes. You will need to adjust the the value to meet your needs.
I've created a working version at JSBin
Okay, you have the row element within a container - so unless you use negative margins you won't be able to move the element the whole way across. You could place that row within a container-fluid element which will remove the restrictions on the location but it would stretch the element the whole width of the screen
<div class="container">
<div class="navbar navbar-default">
<p>Navbar Code Here</p>
</div>
</div><!-- /.container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="http://vignette3.wikia.nocookie.net/uncyclopedia/images/7/71/Black.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="http://globe-views.com/dcim/dreams/red/red-01.jpg">
</div>
</div>
</div><!-- /.container-fluid -->
You can then remove the padding on that left image by applying
#swoosh {padding-left: 0;}
to your css.
If you need to change the alignment of the columns in responsive views, you should start taking a look at http://getbootstrap.com/css/#grid-example-mixed-complete to change the layout at the viewport reduces - perhaps using col-xs-6 etc to achieve the alignment you are after