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.
Related
I am trying to align the content to the existing container above, however I am unable to successfully commit this as the container is located in a row because I wanted the file directory div on the left which pushes the container to the right of course.
Assigning a position: fixed; to the file directory div would fix the issue however it would not maintain the responsive web design which Bootstrap offers with its superior system.
As you can see the content is not in the right spot.
I have tried numerous things in css however none of these didn't feel right. For now I have tried playing with the col system of Bootstrap for a bearable outcome. Furthermore the image I provided of the website is in fact the result of this piece of code in case one wonders whether the image corresponds to the code.
<div class="container"><h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2></div>
<div class="container-fluid">
<div class="row justify-content-between">
<div class="file-list col-lg-2">
<h3 class="ml-5"><i class="fas fa-file-alt" style="color: darkgoldenrod"></i> File list:</h3>
<div class="file-list ml-5">
<p>List</p>
</div>
</div>
<div class="content col-lg-9">
content
</div>
</div>
</div>
<div class="file-list col-lg-2">
change to
<div class="file-list col-lg-3">
your col need 1 more col as it is a 12-grid column.
matching it to the right column
<div class="content col-lg-9">
This would be because you are using a container for the heading, which is based on a fixed with of the screen, and container fluid which is the full width on the screen.
You could change the heading container to something like this to align it with your content column? (Presuming you are using Bootstrap 4)
<div class="container-fluid">
<div class="row">
<div class="col-lg-9 offset-lg-9">
<h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2>
</div>
</div>
</div>
I want an element to be centered vertically in a page and i am using bootstrap 4.0. Most of the methods i found were about earlier versions or the alpha, and the official method doesn't work, so, could someone please explain clearly once and for all how to center an element vertically in bootstrap?
Use Bootstrap's align-items-center, which can be read here
<div class="container">
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
EDIT
You can also use Bootstrap's new support for flex box to center vertically, which can be read here
<div class="d-flex align-items-center">...</div>
I just started using Bootstrap and it's awesome so far. However I have one question, I created a content container and put a picture in it and I'm only going to have one in the row and I want it to go in the center of the page. I have tried a lot of things but to no avail, they don't work. Any help is appreciated! I'm also using Bootstrap version 3.3.6
This is my code for the container
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="random.jpg" alt="...">
<div class="caption">
<h3><center>I want the whole container in the center of the page.</center></h3>
</div>
</div>
</div>
</div>
</div>
Bootstrap has built in classes for you to use instead of the default tag. Try this for your image:
<img class="center-block" src="yourimage.png" />
I'm attempting a layout in bootstrap that is positioned using the following image.
I have two rows, the top half and the bottom half both containing two separate background gradients. The rows are both divided into 50% wide columns, with the right-most columns containing content and the left-most columns containing a single image.
My problem is that I'm unsure of how to get an element to span two rows vertically while still retaining it's fluid layout. I've positioned it absolutely but once the window scales down it doesn't stack properly. My layout is as follows. Getting rid of the rows and splitting the page into two vertical columns results in me being unsure of how to split the background into two separate horizontal gradients. Any help would be appreciated. Thanks!
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
<div class="col-md-6">
<img src="wooo-im-an-image">
</div>
<div class="col-md-6">
content of a mostly blabberous nature here
</div>
</div>
<div class="row" style="height:50%;background-image:-webkit-gradient(etc)">
<div class="col-md-6">
emtpy
</div>
<div class="col-md-6">
more content of a mostly blabberous nature here
</div>
</div>
I'm not sure if I quite understand but I did put together an example using your picture. Pardon the CSS skills and let me know if it helps you.
<div class="row gradient">
<div class="col-md-6"><div class="well inheritback">IMG<br><br><br><br><br></div></div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12"><div class="well inheritback">CONTENT</div></div>
</div>
<div class="row">
<div class="col-md-12"><div class="well inheritback">CONTENT</div></div>
</div>
</div>
</div>
Live Demo
http://www.bootply.com/116896
I have the following code:
<div class="col-md-9 col-md-offset-3">
<div class="col-md-9">
<div class="page-header"><h3>Your Profile</h3></div>
<div class="col-md-5">
<div class="col-md-4 text-right">Name:<br><br>Email:<br><br>Phone:<br><br>Gender:</div>
<div class="col-md-8 text-left">John Smith<br><br>email#email.com<br><br>07878787456<br><br>Male</div>
</div>
<div class="col-md-7">
<div class="col-md-4 text-right">Name:<br><br>Email:<br><br>Phone:<br><br>Gender:</div>
<div class="col-md-8 text-left">John Smith<br><br>email#email.com<br><br>07878787456<br><br>Male</div>
</div>
</div>
</div>
For some reason it displays like this: http://i.imgur.com/0YPMWf3.png
Here is a jsfiddle (expand the size of the output box): http://jsfiddle.net/z49Ry/
The text with "Name:" etc should be aligned right, and the other text should be aligned left. For some reason the "Name:" etc does not align right properly on the left.
I'm guessing this is because maybe the span is too small, if so then what would be a better solution for displaying data?
I really can't figure out any errors in your code. Like you said it's probably caused by too thin column.
Using BR to separate data is probably worst approach. For tabular data use table. If tables isn't what you're looking for you can as well use unordered list or description list (DL).