I'm learning the basics of Bootstrap and I'm stuck when it comes to creating margins. I want to give space between the quote and the thumbnails. I've looked up tutorials and even searched Stack overflow and haven't found a solution. It's as if all the elements are stuck together. Can someone please tell me what I need to do to create a margin? Thanks in advance.
<div>
<h1 class = 'text-center'> Bob Dylan </h1>
<img width = '80%' class = 'img-responsive center-block' src ="http://www.billboard.com/files/media/bob-dylan-portrait-bw-1966-billboard-1548.jpg" alt = 'Bob Dylan'></img>
<h3 class = "text-center">". . . he not busy being born is busy dying."</h3>
</div>
<div class = 'row'>
<div class="col-xs-2">
<img width = "100%" src = 'https://upload.wikimedia.org/wikipedia/en/thumb/6/60/Bob_Dylan_-_Bob_Dylan.gif/220px-Bob_Dylan_-_Bob_Dylan.gif'>
<p class = 'center-block'> 1962 </p>
</div>
https://codepen.io/jwdwsn/pen/awaGdv
To solve this, instead create a new class "bottom-margin" that adds the standard margin that you need.
.bottom-margin { margin-bottom:30px; }
Then add a div after the quote div as below
<div class = "row bottom-margin">
<div class = "col-md-12">
</div>
</div>
I tried it works.
Hope this helps.
Related
I hope you are good.
I'm having trouble to customise my label with amcharts.
I'm trying to put on a map, the date and the place of an event as a label like that:
https://codepen.io/acivita/pen/BarvPzZ
<div class="main2">
<div class="container">
<div class="element">713</div>
<div class="element2">Pampelune</div>
</div>
</div>
When I exported this code on amcharts, it works well but it's too big:
https://codepen.io/acivita/pen/KKobeXm
var label = labelSeries.mapImages.create();
label.latitude = element.latitude;
label.date = tmpData[0].eventInfo.date;
label.city = tmpData[0].eventInfo.specific;
label.longitude = element.longitude;
label.interactionsEnabled = false;
label.children.getIndex(0).html = `
<div class="main2">
<div class="container">
<div class="element">713</div>
<div class="element2">Pampelune</div>
</div>
</div>`
Example :
I added a red background to see why it wasn't aligned with the dot.
https://codepen.io/acivita/pen/vYRmzgO
So when I try to reduce it, there are some issues:
the text is not vertically aligned anymore.
it seems to have some margin .
It looks like if I put too small properties for my text the behaviour get weird.
It may be a css/html error because I'm not very good at positioning stuff.
Thanks for the help and have a nice day.
Trying to extract Message text from:
<div class="Item ItemDiscussion Role_Member" id="Discussion_2318">
<div class="Discussion">
<div class="Item-BodyWrap">
<div class="Item-Body">
<div class="Message">
Hello<br/>I have a very interesting observation on nature of birds in Alaska ... <br/>
Was there 10/19/18 has anyone heard of this </div>
<div class="ReactionRecord"></div><div class="Reactions"></div> </div>
</div>
</div>
</div>
I have got this bit with:
tag = soup.find('div', {'class' : 'ItemDiscussion'})
Next I am trying to go down with:
s = str((tag.contents)[1])
sp = BeautifulSoup(s)
sp.contents
But this does not help much. How to get message text from <div class="Message"> ?
you can find the element from soup directly.
discussion_div = soup.find("div", {"class": "ItemDiscussion"})
message_text = discussion_div.find("div", {"class": "Message"}).text
You can select any element using select_one() function by entering the CSS Selector to the element. select_one() function will only return one element if you want more than one element then you can use select() which will return a list of found elements. here is the example for you,
soup = BeautifulSoup(html, "html.parser")
print soup.select_one("div.Item div.Discussion div.Item-BodyWrap div.Item-Body div.Message").text
You can also select your element using a single class if it is
unique.
print soup.select_one("div.Message").text
I am using bootstrap for the first time. Im just finishing up this form, but I want to add a button at the bottom right of form. I've got the button where I want it to be vertically, but right now its at the bottom left of my form, not the right. The only solution I could find is to add 3 empty divs, and then my button as the fourth div. This causes it to be in the 4th column. I was wondering if there was a way to achieve this without using unnecesarry code.
Im fairly new to stackoverflow, I apologize if my question is missing something or isn't clear
Here's my code for that row so far:
Note: parent row is defined using col-md-12.
<div class="row" style="padding-top: 3px">
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
</div>
<div class="col-md-3">
#Html.WETSubmitButton(btnAdd, new { #class = "btn btn-default", name = "action", value = "Add" })
</div>
</div>
you would just use the offset class like this:
<div class="row pt-1" >
<div class="col-md-3 offset-md-9">
#Html.WETSubmitButton(btnAdd, new { #class = "btn btn-default", name = "action", value = "Add" })
</div>
</div>
also I removed your padding and used the bootstrap built in padding class on the row.
I was wondering if it was possible to create a sort of HTML object instead of copy pasting stuff, I thought of doing it via javascript but wondered if there was an easier way to do it (writing html in JS is a bit tedious).
Basically let's say a have a div like that:
<div class ="col">
<div class="Title">
Title
</div>
<div class="Text">
Text
</div>
</div>
Which is the best way, to have some sort of function where you can objectName.create(title, text) or to have a javascript function like Function(title, text) create the element?
You could take the outer element and clone it, change its content and append it back to where you want it. Be advised that this may duplicate ids if your elements should have one.
function createHtml(title, text) {
const el = document.querySelector('.col').cloneNode(true);
el.querySelector('.Title').innerText = title;
el.querySelector('.Text').innerText = text;
document.body.appendChild(el);
}
createHtml("Foo", "Bar");
<div class="col">
<div class="Title">
Title
</div>
<div class="Text">
Text
</div>
</div>
Another option would be to create the element from scratch
function createElement(title, text) {
const el = document.createElement('div');
el.clasName = 'col';
const titleDiv = document.createElement('div');
titleDiv.className = 'Title';
titleDiv.appendChild(document.createTextNode(title));
const textDiv = document.createElement('div');
textDiv.className = 'Text';
textDiv.appendChild(document.createTextNode(text));
el.appendChild(titleDiv);
el.appendChild(textDiv);
document.body.appendChild(el);
}
createElement("Foo", "Bar");
Note that there are many frameworks out there (like angular, react, vue, ...) that would do things like that easier/better.
It is not so bad to write html in js after template literals became a thing in js, you could do something like this
function addCol(title, text){
document.querySelector(".list").innerHTML += `
<div class="col">
<div class="Title">
${title}
</div>
<div class="Text">
${text}
</div>
</div>
`;
}
addCol("hello", "world");
addCol("foo", "bar");
<div class="list"></div>
Im trying to make a site compatible with IE8. It all looks good save one image not scaling. Any suggestions for a possible fix? Heres the appropriate code. The large picture is the one giving me issues
<div class = 'picture-container' id = 'pc1'>
<div class = 'large-picture' id = 'lp1'>
<figure style = 'float:left;max-width:45%;height:auto'>
<img src = 'make-up_artist_dupontstudios.png' width = '100%' height = '100%' class = 'no-mobile'>
<figcaption class = 'red-cap'>Our Set-Up</figcaption>
</figure>
<div class = 'picture-content'>
<div class = 'picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
<div class = 'picture-text'>We built a boutique full service production studio that allows for
one, two and three person filmed interviews and conversations.
We have studio lights, a three camera set-up and remote
monitoring. Additionally, our Infinity Wall creates a clean and
professional look that allows the film to be about the message.</div>
<div class = 'small-picture'>
<img src = 'hair_and_makeup_dupontstudios.png' width = '175' height = '100'>
</div>
<div class = 'small-picture'>
<img src = 'infinity_wall_dupontstudios.png' width = '175' height = '100'>
</div>
</div>
</div>
</div>