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>Can someone help me figure out how to pass an HTML value as a parameter for my function? Here is the code snippet I have: <input type ="text" placeholder="Smart Contract Bytecode" name="name" id ="scbytecode" className="nice-textbox"/> <button i ...
I am having an issue with buttons containing SVG elements, here is an example code snippet: <button> Checkout <ArrowSvg /> </button> The ArrowSvg component looks like this (with the line having a class of "svg-line"): <svg fill=&quo ...
I am currently working with a simple sankey chart in Highcharts. Everything is functioning correctly with the sample data I have implemented, except for one issue - when I increase the font size of the data labels, not all the data is displayed. The info ...
Each time I click on a div, it gets encased in a black line. However, my goal is for the previously selected div to lose the black outline whenever I click on a different div. Only the current div should have the border. Below is the code snippet that I a ...
I've exhausted all options, but I just can't seem to get the fields aligned horizontally. <form class="form-horizontal" role="form"> <div class="form-inline"> <div class="form-group"> <label for="acctName ...
Is there a way to make a fluid container in Bootstrap 5 that contains a normal container on the left with 6 columns of content, while allowing the right side of the container to expand to the end of the browser window? When using a normal fluid container, ...
Greetings! I am facing a situation where I have an XML file containing image tags like this: <pb facs="ciao.jpg">. Additionally, I have an XSL file that includes a JavaScript snippet as shown below: <script type="text/javascript> function ...
Here is the HTML code snippet I am working with: <div class="nav"> <ul class="nav-dots"> <li class='ni n1'><a href="" class='nia'>dot</a></li> <li class='ni n2'><a href="" clas ...
My Bootstrap navbar has right-aligned dropdowns, but when I try changing the trigger to hover, the .dropdown-menu-end class doesn't work as expected. I attempted using CSS for the hover effect: .dropdown:hover .dropdown-menu { display: block; mar ...
After inputting the less code below into : @item-width: 120px; @num-cols: 3; @margins: 2 * 20px; @layout-max-width: @num-cols * @item-width + @margins; @media (min-width: @layout-max-width) { .list { width: @layout-max-width; } } The resul ...
I'm currently working on a project using PhoneGap where I am facing an issue with uploading files and adding all file names to the parameters. The desired format is: http://www.example.com/uplaod.html?file=file1,file2,file3 To achieve this, I have a ...
Here is a file input with an associated function: <img id="uploadPreview"> <div id="changeImage">Change</div> <div id="customImage"> <input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" / ...
I'm currently developing a responsive bar chart, and everything seems to be going smoothly except for one issue - when viewing it in full screen, the bars appear to be flipped upside down. It's quite puzzling as all other elements such as text an ...
I'm having trouble getting the bootstrap-slider.js library from to function correctly. All I see are textboxes instead of the slider components. You can view an example at I have verified that the CSS and JS files are pointing to the correct direc ...
Currently, I am attempting to implement a sidebar push navigation that mimics the one showcased here. My HTML structure includes content within a center element div. The code snippet is as follows: <div id="mySidenav" class="sidenav"> <a href="j ...
I am finding this quite perplexing. I am currently using font-squirrel to download a web kit in order to display a custom font. You can access the font through this link: If you visit the homepage now: The main text in the center reads "Custom Built Webs ...
I am in the process of creating a thumbnail gallery that includes a slider feature using Swiper. The default setup has the slider hidden, and once an image is clicked, the slider should appear with the selected image. To close the slider and return to the ...
There is a function in place that changes the background image of a vertical website when a navigation menu item is clicked. <script type="text/javascript"> $(function() { $('a.panel-home').click(function(){ $("#bgimg").attr(' ...
I am attempting to create a responsive drawer component using material-ui, where it is toggleable on smaller screens and remains open on desktop. Following the mui documentation, I added the temporary variant to the drawer, but it does not display in desk ...
I've obtained these arrays from a JSON file "Works": [ {"TypeOfWork": "scaffolding", "Status": "done"}, {"TypeOfWork": "painting", "Status": "on-going"} ] My go ...