Hey everyone, I'm currently working on getting some text to show up below an image using Bootstrap 3.
Here's what I have so far:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3"><img alt="my image" class="img-about" src="Images/s1.fw.png"></div>
<div class="col-md-3">
<h2>aa</h2>
</div>
Currently, it's displaying side by side, but I want the image to be on top with the text below, like this:
Picture
-Text
Thank you!
To ensure your text appears below the image, avoid placing it in a separate column.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<img alt="my image" class="img-about" src="Images/s1.fw.png"></div>
<h2>aa</h2>
<div class="col-md-3">
// Use this for second image to the right of the first one.
</div>
</div>
If you're seeking a fresh perspective, check out this useful link
p {
font-family: 'Noto Sans', sans-serif;
font-size: 1.1em;
line-height: 1.5em;
color: #666;
}
img {
max-width: 100%;
height: auto;
margin: 5px 0 50px;
}
.grid {
display: -webkit-flex;
display: flex;
}
.col {
padding: 30px;
}
.fluid-flex {
-webkit-flex: 1;
flex: 1;
/* Not supported by Safari */
}<div class="grid">
<div class="col fluid-flex">
<h1>My Image 1</h1>
<img src="https://s.zkcdn.net/Advertisers/cd7db6dc529e4cd3a3b9483b34465631.png" alt="Image" title="Image" />
<p>This was taken when I was in TX.
</p>
</div>
<div class="col fluid-flex">
<h1>My Image 2</h1>
<img src="https://s.zkcdn.net/Advertisers/cd7db6dc529e4cd3a3b9483b34465631.png" alt="Image" title="Image" />
<p>This was taken when I was in CA.
</p>
</div>
<div class="col fluid-flex">
<h1>My Image 3</h1>
<img src="https://s.zkcdn.net/Advertisers/cd7db6dc529e4cd3a3b9483b34465631.png" alt="Image" title="Image" />
<p>This was taken when I was in NY.
</p>
</div>Creating a layout without using bootstrap:
.wrapper {
width: 150px;
border:1px solid #ccc;
padding: 10px;
}
img {
width: 100%;
border: 1px solid #ccc;
padding: 2px;
}
h2 {
text-align: center;
} <div class="wrapper">
<img alt="my image" class="img-about" src="http://justcuteanimals.com/wp-content/uploads/2016/10/baby-bear-pictures-cute-animal-pics.jpg">
<h2>Some Text</h2>
</div>Trying to make a button in CSS appear "pushed down" on :active, I decided to increase the padding-top by 2px and decrease padding-bottom by 2px. However, this adjustment seemed to affect the margins of other elements for some reason that eludes me. I am c ...
I'm attempting to make sure the tail of the speechbubble aligns with the center of the image, regardless of their respective heights. Essentially, I want the image to always be centered within the current height of the wrapper, similar to how the spee ...
My current code allows me to draw a grid on a canvas with multiple lines, but I'm encountering an issue when trying to render 25 or more lines - some of them don't appear on the canvas. This problem becomes more noticeable when there are 40 or mo ...
After a recent migration to the Windows 7 operating system at my company, I encountered an issue. While using the same Visual Studio 2010 master file that was working fine on my Windows XP machine, I noticed that all the images below were now shifted to t ...
I am currently working on integrating Careers FORM and Contact Us FORM into a single page website. However, I am facing an issue with the form Submit Buttons. The problem arises during validation of the input boxes. How can I differentiate between the two ...
I've been struggling to align these list elements with their counterparts, but they seem to automatically create a margin for their child elements. It is essential for these list items to maintain the position:relative attribute so that the #dropdown ...
I am experiencing an issue with my HTML structure: <html> <body> This is the container of the iframe <iframe src="/foo.html"> </iframe> </body> </html> (/foo.html) <html> <script type="text/javascript"> $( ...
I am currently working on a feature that enables placing a button next to the text selected by the user. Here's what I want to achieve: However, I would like this functionality to apply only when the selected text is inside divs with the class floatb ...
Check out this code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport ...
I am struggling to include my CSS file in the header partial Here is the link I am using: <link rel="stylesheet" href="stylesheets/app.css"> This is what my directory structure looks like: project models node_modules public stylesh ...
Hello there, I am just starting out with web development and learning about Vue.js. In Vue 3, the recommended way to import CSS files from different packages is as follows: Method 1: Import directly in app.js //app.js import '../css/app.css'; i ...
I'm facing an issue where a purple cover over the <video> element extends slightly beyond the video's bottom border. Here's the code I'm using: .media-cover { display: inline-block; position: relative; } .media-cover:after ...
In my bootstrap navbar, I have the following menu items: Home | About | Contact I'm looking to assign the active class to each menu item based on the current angular route. Specifically, how can I set class="active" when the angular route is at # ...
I'm struggling to achieve automatic vertical alignment for this. While I can manually center it using padding-bottom, I prefer a way to position it vertically on its own. How can I accomplish this while retaining the display: inline-block feature? &l ...
Looking for a solution to create a responsive table layout where the thead stretches up to a specified div, while the tbody expands to fill the entire screen width. Is this achievable without using fixed values? https://i.stack.imgur.com/v2ZYx.png It is ...
I was attempting to create a listview with list items that have a button on the right side, much like a jQuery Mobile split button listview. However, I only want the right button to be clickable. The left part of each item should contain a label along with ...
Is there a way to change color in a matplotlib plot using html in Python? I attempted plt.plot(x,y,marker=".",color="#e0e0e0") However, this resulted in data points displayed as ".", connected by lines of color #e0e0e0 which is not desired. I also experi ...
I have been developing a website where a div element on a specific page displays values from a PHP file. Below is the PHP code responsible for rendering the information on the HTML: $output .= ' <div class="row text-left col-md-3 ...
One way to display customer testimonials is by using flexslider to create a horizontal scroll. The testimonials are hidden and only shown when the "view all testimonials" link is clicked, which can be seen in this JSFiddle example: Working : Demo JQuery ...
This has been quite a challenge for me. I have successfully implemented the main functionality that I wanted in this codepen. The SVG is divided into 3 sections, with the middle section sliding away from the others when you click the "Find Out More" button ...