Adding Text and Images in the same row using bootstrap - html

I am currently trying to put text right of an image using the bootstrap classes. I am fairly new to using bootstrap. I used the float class but the image just gets put under the text. I want to have it so the img tag is under the text tag in the code. I also do not want to use any css in this project. I know it is impractical but I am curious if you can make the text and Images side by side with the img tag under the text tag

Text right of an image using the bootstrap classes, but with the img tag under the text tag in the code
<div class="row">
<div class="col-6 p-0 order-2">Text</div>
<div class="col-6 p-0 order-1">Image</div>
</div>

If you want the img on the left but under the text in the code you have to invert order:
<div class="row">
<div style="padding:0" class="col-6 order-2">Text</div>
<div style="padding:0" class="col-6 order-1">Image</div>
</div>

Related

Create a Header in Bootstrap 4 with correctly aligned logo

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

Make rotated text take entire height of parent

Hey i was just messing with some css transforms and i can't make this happen,
https://codepen.io/simobm/pen/YvoOMO
Im using Bootstrap 4 and so i make 2 columns , on the left there is an image and on the right some text, now i want the text to to be vertical and centered so i use :
transform:rotate(90deg)
on the text and :
align-items: center;
text-align: center;
On the column itself . The problem as you can see is that on mobile, the text breaks to 2 lines and 3 lines consecutively.
There is a handy text-nowrap class that you can apply that will stop the text from becoming multiple lines.
<div class="container">
<div class="row mt-5">
<div class="col-9 ">
<img class="img-fluid" src="https://images.unsplash.com/photo-1521818372696-23e67aff37a5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b42f31aba73642725afa0a222d211542" alt="">
</div>
<div class="col-3 d-flex align-items-center justify-content-center">
<p class="rotate text-nowrap">Azurmendi by ENEKO ATXA</p>
</div>
</div>
</div>
CodePen
Without handling text resizing, this can have some potentially undesirable effects on mobile.
Useful Links
Bootstrap text-nowrap Documentation

Responsive, alternating divs with CSS and Bootstrap's grid system

I am attempting to create a pattern of two divs, side by side, repeating vertically. One side is to contain an image (which I've done using CSS background image) and the other text. The side which contains the image alternates each row.
The divs use the Bootstrap grid's col-sm-6 class. It looks great on desktop but I'm having trouble getting it to look good on smaller devices.
The issue is that because of the order in which the code is written, when it collapses down to 100% width on mobile it goes:
image
text
text
image
image
text
instead of:
image
text
image
text
image
text
The only workaround I've thought of so far is to have two of each image div, one before and one after the text div, and to hide or display them based on the size of the screen. Not a great solution though. Any thoughts?
put your content like following
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
This will give you what you want
In the end I put them all in the same order and then went with this:
.campaign-idea:nth-child(odd) {
.image {
float: right;
}
}

Bootstrap cutting part of ShareThis buttons

I am attempting to embed ShareThis code in to a website created using Bootstrap.
Problem is that for some reason the bottom of both buttons is cut off and also I cannot seem to center the buttons using Bootstrap column offsets as it seems impossible to get both buttons exactly centered using this method.
What is the solution here?
<div class="row">
<div class="col-lg-12">
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
</div>
</div>
I'm not too familiar with the ShareThis buttons, do you have a link to view the site?
Regarding the centering, currently you are using a col-lg-12 which means it takes up 100% of the width and everything inside (your buttons) would be left aligned by default. You wouldn't necessarily need to use the bootstrap column offset but just put the spans in a wrapper as below. You can find out more about the Bootstrap Grid here http://getbootstrap.com/css/#grid.
<div class="row">
<div class="col-lg-12">
<div class="social-wrapper">
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
</div>
</div>
</div>
Then add text-align:center to the wrapper.
.social-wrapper {
text-align: center;
}
Check out a JSFiddle here: https://jsfiddle.net/hez7pqbo/

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.