Bootstrap grid not centering? What am I doing wrong [duplicate] - html

This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 4 years ago.
I'm working on the Free code camp project, but I've hit a snag. I cannot get the paragraph text below the image to center. I have the set to grid 4.
<div class="container">
<div class="row">
<div class="jumbotron">
<div class="col-xs-12">
<h1 class="text-center text-uppercase">Bernie Sanders</h1>
<em><h2 class="text-center">"The man who stands for the people"</h2></em>
<img id="bernie" src="https://imgur.com/iw13OaU.jpg" alt="Bernie Sanders">
<div class="col-xs-4 col-md-4">
<h3 class="text-center" id="timeline">A timeline of Bernie Sanders Accomplishments</h3>
<ul class="text-justify small" id="list">
...
https://codepen.io/thehiddencheese/pen/WMWJeW

First wrap your grid 4 to the .row and use bootstrap [Flex Utilities] .justify-content-center class to that row like
<div class="row justify-content-center">
<div class="col-sm-4"></div>
</div>
Another solution will be to use [offset] classes like
<div class="row">
<div class="col-sm-4 offset-sm-4"></div>
</div>

You can use text-align: center for the div <div class="col-xs-4 col-md-4"> then the paragraph text will be aligned to the center of the page below the image.
But, it's looking odd with the bullet points and text aligned to center. If you are aligning it to the center I suggest going without bullets :).
Below is the div tag you can use.
<div class="col-xs-4 col-md-4" style=" text-align: center;">

Related

Content appearing on top of full-width video background instead of below [duplicate]

This question already has answers here:
Body text goes over the top of fixed nav bar
(3 answers)
Hide scrollable content behind transparent fixed position divs when scrolling the page?
(13 answers)
Closed 4 years ago.
I'm trying to create a page with a full width video banner at the top then some content underneath. At the moment whenever I add any additional content it appears on top of the video, instead of below it and i'm not sure why.
HTML
<div id="content">
<div class="homepageContainer">
<nav id="header" class="opaque navbar navbar-default navbar-fixed-top hidden-print navbar-megamenu" role="navigation">
...
</nav>
<div class="jumbotron jumbotron-cover">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-6 col-sm-push-2 col-md-push-3">
<div class="video-placeholder" style="background-image:url(urlOfImage)">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row hero-content text-center">
<div class="col-sm-12 col-md-12 col-lg-8 col-lg-offset-2">
<img src="media/img/logo.png" class="logo animated fadeInDown">
<h1 class="animated fadeInDown top-bottom-borders">Some content text here.</h1>
</div>
</div>
</div>
</div>
</div>
Do any of the classes "jumbotron", "jumbotron-cover" or "video-placeholder" have position absolute or fixed?
If so, this'll remove that element out of the natural flow of the document, so the text that you want to see below, will move up into "it's space"
You can use the z-index CSS property with a higher value for objects you want displayed on top.
(The property only applies if position is not static).

Adding space between two divs [duplicate]

This question already has answers here:
Set space between divs
(4 answers)
Closed 5 years ago.
I have defined a section in HTML file with two divs next to one another as follows:
<div class="container">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
</div>
How to add space between two horizontal divs in the HTML file?
from your snippet it seems you are using bootstrap, if this is the case then you can add space between two horizontal divs in bootstrap as follow:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
where: col-ms-offset-{value}. add space (as specified) to the left of the div. and you should remember that the size of all divs including offsets, must sum to 12 in bootstrap grid system as the above example.
if you want to space two divs you can do the following:
HTML
<div class="container">
<div class="row">
<div class="col-sm-4">A</div>
<div class="col-sm-4">B</div>
</div>
</div>
CSS
.col-sm-4 {
margin: 0 5px;
}

Bootstrap Columns with vertically aligned text [duplicate]

This question already has answers here:
How to vertically center a container in Bootstrap?
(10 answers)
Vertically center element with Bootstrap 3
(1 answer)
vertical-align with Bootstrap 3
(26 answers)
Closed 5 years ago.
I have 2 bootstrap col-md-6 columns that one has an image in and the other has a p tag in it with a paragraph of text. how would i dynamically vertically align the text so its perfect compared to the image next to it, code below
<div class="col-md-6">
<img class="img-responsive" src="https://picsum.photos/550/430" >
</div>
<div class="col-md-6">
<p>text goes here</p>
</div>
i also need to be able to do the same thing with a column that may have 3 tags in it so a h3 p and an a tag.
If you are using V4 of bootstrap you can simply rely on some class utilities and use align-items-center to achieve this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row align-items-center">
<div class="col">
<img class="img-responsive" src="https://lorempixel.com/400/200/">
</div>
<div class="col">
<p>text goes here</p>
</div>
</div>
</div>

Bootstrap 4 row does not align to middle [duplicate]

This question already has answers here:
Center a column using Twitter Bootstrap 3
(34 answers)
Closed 6 years ago.
I'm trying to get the content in <div class="col-md-2 col-lg-2"> in the middle to align to middle, but to no avail.
I know that setting the columns to a size of 2 will not fill the space of the grid system of 12 columns, but I want it to be aligned to the middle regardless.
<div class="row">
<div class="col-lg-12">
<h1 class="content-header">Header</h1>
<div class="row">
<div class="col-md-2 col-lg-2">
content
</div>
<div class="col-md-2 col-lg-2">
content
</div>
</div>
</div>
found a css trick that works
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
Bootstrap 4, like Bootstrap 3, uses offset to move or center entire columns. So in your case use offset-*-4 to move it over 4 cols in the 12 col grid.
<div class="row">
<div class="col-lg-12 text-xs-center">
<h1 class="content-header">Header</h1>
<div class="row">
<div class="col-md-2 col-lg-2 offset-md-4 offset-lg-4">
content
</div>
<div class="col-md-2 col-lg-2">
content
</div>
</div>
</div>
</div>
To center inline elements (like text), use:
text-center (this was text-center in 3.x)
To center block elements (like DIV) or columns, use:
mx-auto (this was center-block in 3.x)
Demo: http://www.codeply.com/go/Wxzbd3a6og
There are also new responsive alignment classes in Bootstrap 4 so you can align differently at various breakpoints.

How to align images and urls within div trees in CSS?

I am learning how to become Front End Developer at Udacity. There is a project that I need to submit. I ran in couple of issues I couldn't find help with, some of my images and urls within divs don't want to align properly. I tried using this website as a solution https://codemyviews.com/blog/how-to-center-anything-with-css
because it offered most variations on aligning blocks... But none of them worked.
<div class="row">
<div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
<div class="col-4"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
<div class="col-4 end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>
These are images, I am trying to align first image to the left, 2nd to the center and 3rd to the right. I could align them by using margins and paddings in html, but I want it to work with responsive design.
<div class="row">
<div class="col-4">
https://github.com/udacity/Appify/
</div>
<div class="col-4">
https://github.com/udacity/Sunflower/
</div>
<div class="col-4">
https://github.com/udacity/Bokeh/
</div>
</div>
and these are urls right underneath the pictures, that aren't lining up, no matter what I try.
This is the screenshot of my webpage http://picpaste.com/Portfolio-NOGcuGm8.jpg
P.S. This is my first post at Stack Overflow, TIA!
You can use Bootstrap's text-center and text-right classes to modify inner alignment of columns.
<div class="row">
<div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
<div class="col-4 text-center"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
<div class="col-4 text-right end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>
If you aren't using Bootstrap, these classes simply apply text-align: center and text-align: right respectively.