I currently have a Bootstrap 4 (beta) grid set up such that it displays 3 icons and then 2 icons in >sm screens, and on xs-screens it goes down to 2x2x1.
I achieve this by marking each column . However, is there a way to make each column col-sm-3 (i want them to be smaller) and force the remaining icons to be on a new row, but also have them stack 2x2x1 on xs screens?
WHAT I HAVE:
<div id="Customers" class = "container-fluid customersBlock">
<div class = "row justify-content-center">
<div class = "col-sm-4 col-6">
IMG 1
</div>
<div class = "col-sm-4 col-6"">
IMG 2
</div>
<div class = "col-sm-4 col-6">
IMG 3
</div>
<div class = "col-sm-4 col-6">
IMG 4
</div>
<div class = "col-sm-4 col-6">
IMG 5
</div>
</div>
</div>
WHAT I WANT:
<div id="Customers" class = "container-fluid customersBlock">
<div class = "row justify-content-center">
<div class = "col-sm-3 col-6">
IMG 1
</div>
<div class = "col-sm-3 col-6"">
IMG 2
</div>
<div class = "col-sm-3 col-6">
IMG 3
</div>
~~ Some way to force columns to next line on >small screens
But on XS Screens still have them stack 2x2x1 ~~
<div class = "col-sm-3 col-6">
IMG 4
</div>
<div class = "col-sm-3 col-6">
IMG 5
</div>
</div>
</div>
Related
I just want to pull data from HTML by using python.(I need data = 20%)
Any help on this would be greatly appreciated.
<div class="ratings-container">
<div class="ratings">
<div class="ratings active" style="width: 20%"></div>
</div>
</div>
I don't know how to get the style content. The following similar code's result is NULL:
mratingNew = (tag.findAll('div',attrs={"class":"ratings active"}))
for i in range(len(muserName)):
print(mratingNew[i].['style'])
You can get width with using find and can split it according to :
from bs4 import BeautifulSoup
html = '''<div class="ratings-container">
<div class="ratings">
<div class="ratings active" style="width: 20%"></div>
</div>
</div>'''
soup = BeautifulSoup(html,"html.parser")
finddiv = soup.find('div',attrs={'class':'ratings active'})
style = finddiv['style']
style = style.split(':',1)[-1]
print style
OUTPUT :
20%
If you have more than one width with the same class name like :
html = '''<div class="ratings-container">
<div class="ratings">
<div class="ratings active" style="width: 20%"></div>
<div class="ratings active" style="width: 40%"></div>
<div class="ratings active" style="width: 30%"></div>
</div>
</div>'''
You need to use findAll and split it one by one
find_last_div = soup.findAll('div',attrs={'class':'ratings active'})
for width_value in find_last_div:
width_Get = width_value['style'].split(':',1)[-1]
print width_Get
OUTPUT :
20%
40%
30%
I am trying to check if class = "special-price" exists in below code.
Here is html code :
<div class="product-shop">
<div class="f-fix">
<h2 class="product-name newname"> Xiaomi Mi Band 2 Strap (Black with White Border) </h2>
<!--product price-->
<div class="text-center ">
<div class="price-box">
<p class="old-price"> <span class="price-label">Regular Price:</span >
<span class = "price" id = "old-price-8846" > ৳200 </span>
</p >
<p class = "special-price" >
<span class = "price-label"> Special Price </span>
<span class="price" itemprop="price" content="149" id="product-price-8846"> ৳149 </span>
</p>
</div>
</div >
</div>
I am using Scrapy with python. After checking if the class found I need to collect text of class="price".
Did you try something like:
if response.css('.special-price'):
price = response.css('.price::text').get() # or do whatever you need
or for short:
price = response.css('.special-price .price::text').get()
it will give you None in case there is no element with special-price class.
I have a problem to get the data from some page. This is part of my code:
for result in results:
street = result.find('p', attrs={'class':'size16'}).text
records.append((street))
print (street)
Website:
<div class="media-body pt5 pb10">
<div class="mb15">
<span class="map-item-city block mb0 colorgreen">City</span>
<p class="small mb20"> </p>
<p class="size16">street 98<br>phone. 22 721-56-70</p>
</div>
<div class="colorblack"><strong>open</strong></div>
<div class="mb20 size16">Mon.-Fr. 07.30-15.30</div>
<div class="mb15 ">
Result of my code:
ul. Bema 2phone. (32) 745 72 66-69 Wroclaw None
ul. 1 Maja 22/Vphone. 537-943-969 Olawa <p class="small mb20 colorgreen">Placowka partnerska</p>
I would like to separate or delete the text after a "br" tag. I need only 'street'
<p class="size16">street 98<br>phone. 22 721-56-70</p>
Can You help me?
Use previous_sibling like this:
from bs4 import BeautifulSoup
html = """
<div class="media-body pt5 pb10">
<div class="mb15">
<span class="map-item-city block mb0 colorgreen">Bronisze</span>
<p class="small mb20"> </p>
<p class="size16">Poznańska 98<br>tel. 22 721-56-70</p>
</div>
<div class="colorblack"><strong>Godziny otwarcia</strong></div>
<div class="mb20 size16">Pn.-Pt. 07.30-15.30</div>
<div class="mb15 ">
"""
result=BeautifulSoup(html, "lxml")
br = result.find('br')
print (br.previous_sibling)
Or if you want to narrow it down a bit:
street = result.find('p', attrs={'class':'size16'}).find('br').previous_sibling
print (street)
Outputs (in both cases)
Poznańska 98
From the documentation https://www.crummy.com/software/BeautifulSoup/bs4/doc/
.next_sibling and .previous_sibling
You can use .next_sibling and .previous_sibling to navigate between page elements that are on the same level of the parse tree:
from bs4 import BeautifulSoup
html = """
<div class="media-body pt5 pb10">
<div class="mb15">
<span class="map-item-city block mb0 colorgreen">Bronisze</span>
<p class="small mb20"> </p>
<p class="size16">Poznańska 98<br>tel. 22 721-56-70</p>
</div>
<div class="colorblack"><strong>Godziny otwarcia</strong></div>
<div class="mb20 size16">Pn.-Pt. 07.30-15.30</div>
<div class="mb15 ">
"""
soup=BeautifulSoup(html, "lxml")
for html_tag_div in soup.find_all('div', class_ = "media-body pt5 pb10"):
for html_tag_div_1 in html_tag_div.find_all('div', class_ = "mb15"):
for html_tag_2 in html_tag_div_1.find_all("p", class_ = "size16"):
for html_tag_3 in html_tag_2.find("br").previous_siblings:
print(html_tag_3.get_text())
I am trying to have text on both edges (right and left) of the slider. It's very clear why this makes sense from a UX perspective. Obviously that's not working for me:
<div class="row">
<div class="small-10 small-centered columns">
<fieldset class="fieldset ">
<legend style="background:0;">bla bla</legend>
<div style="color:#1583cc">left extreme name</div>
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<div style="color:#1583cc">right extreme name</div>
<div class="row">
<div class="small-1 small-centered columns">
<input type="number" id="sliderOutput2" style="text-align:center; color: #1583cc;">
</div>
</div>
</fieldset>
</div>
</div>
The texts become their own row while the slider takes up the entire width of the container as a third row in between them.
I'd like them to be one row, where the slider occupies the space left after the texts have been positioned at the (left and right) edges of the container's width. How should that be accomplished in a nice way?
As a newb to the Zurb Foundation, you should look into the grid system which allows you to do just what you are asking. It is also the basis for the responsive design.
Your code:
<div style="color:#1583cc">left extreme name</div>
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<div style="color:#1583cc">right extreme name</div>
... should utilize the grid. Here is an example but there are many ways you could go about it.
<div class="row">
<div class="small-3 columns" style="color:#1583cc">left extreme name</div>
<div class="small-6 columns">
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-3 columns" style="color:#1583cc">right extreme name</div>
</div>
http://foundation.zurb.com/sites/docs/slider.html#data-binding
Here is the info on grids (and more basics) you should study:
http://foundation.zurb.com/sites/docs/grid.html#basics
.container-fluid('padding-bottom:15px;color:#fff')
.row
.col-md-6
| column 1
.col-md-6
| column 2
what's wrong with my jade above?
There are two errors in your example:
Wrong indents.
You can't set inline styles like that.
Try this
.container-fluid(style='padding-bottom:15px;color:#fff;')
.row
.col-md-6
| column 1
.col-md-6
| column 2
It will compile to
<div style="padding-bottom:15px;color:#fff;" class="container-fluid">
<div class="row">
<div class="col-md-6">column 1</div>
<div class="col-md-6">column 2</div>
</div>
</div>
Otherwise you would get something like this
<div padding-bottom:15px;color:#fff="padding-bottom:15px;color:#fff" class="container-fluid">
<div class="row">
<div class="col-md-6">column 1</div>
<div class="col-md-6">column 2</div>
</div>
</div>