beautifulsoup find unique div tag - beautifulsoup

Working with bs4. When trying to find html info inside <div data-reactroot> I am never able to locate it.
Inside <div data-reactroot> I am going to have to loop through each text entry and split it. I get how to find a normal tags but data-reactroot seems to be giving me a lot of trouble.
<div data-reactroot="">
<div>
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true">󱀁</span></div>
</div>
</div>
<div class="_n5lh69r">
<div class="_1p3joamp">Entire guest suite</div>
<div class="_36rlri">
<div class="_36rlri" style="margin-right:24px">
<div class="_czm8crp">2 guests</div>
</div>
<div class="_36rlri" style="margin-right:24px">
<div class="_czm8crp">1 bedroom</div>
</div>
<div class="_36rlri" style="margin-right:24px">
<div class="_czm8crp">1 bed</div>
</div>
<div class="_36rlri" style="margin-right:0">
<div class="_czm8crp">1 bath</div>
</div>
</div>
</div>
</div>
<div style="margin-top:16px">
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true">󰄄</span></div>
</div>
</div>
<div class="_n5lh69r">
<div><span class="_1p3joamp">Self check-in</span></div>
<div class="_czm8crp">Check yourself in with the keypad.</div>
</div>
</div>
</div>
<div style="margin-top:16px">
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true">󰀢</span></div>
</div>
</div>
<div class="_n5lh69r">
<div><span class="_1p3joamp">Sparkling clean</span></div>
<div class="_czm8crp">9 recent guests said this place was sparkling clean.</div>
</div>
</div>
</div>
<div style="margin-top:16px">
<div class="_hgs47m">
<div class="_1thk0tsb">
<div style="margin-right:8px">
<div class="_1ciyl4o"><span class="_8tbpu3" aria-hidden="true">󰀃</span></div>
</div>
</div>
<div class="_n5lh69r">
<div><span class="_1p3joamp">Michael & Tammy is a Superhost</span></div>
<div class="_czm8crp">Superhosts are experienced, highly rated hosts who are committed to providing great stays for guests.</div>
</div>
</div>
</div>
<div style="margin-top:24px;margin-bottom:24px">
<div class="_7qp4lh"></div>
</div>
</div>
</div>
I have tried:
data_soup.find_all("div data-reactroot")
data_soup.get('data-reactroot')

Related

How to make prettier format HTML like this?

What prettier rules do I need to make the formatting like this. To keep the tags on new lines and the text between them?
<template>
<div class="row">
<div class="col-sm-6 col-lg-8">
.col-sm-6 .col-lg-8
</div>
<div class="col-6 col-lg-4">
.col-6 .col-lg-4
</div>
</div>
<div class="row">
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
<div class="col-6 col-sm-4">
.col-6 .col-sm-4
</div>
</div>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</template>

I'm getting Invalid end tag error in vuejs

I'm developing a project with VueJS. Now I am only including a ready-made template in the Vue project. I haven't written any vue code yet. But I keep getting compile errors. I am sure there is no error in my code. But the error just doesn't go away. I share with you my codes and error message in the component I got an error.
<div class="infotechno-hero infotechno-bg">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-text wow move-up">
<h6>IT Design Consulting </h6>
<h1 class="font-weight--reguler mb-15">Facilitate All <br> Local IT-related Service Providers </h1>
<p>Highly Tailored IT Design, Management Support Services. </p>
<div class="hero-button mt-30">
Get details
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-inner-images">
<div class="infotechno-inner-one">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-01.png" alt="" />
</div>
<div class="infotechno-inner-two wow move-up">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-02.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>

Where is your template tags? You have to write your divs in a template in vue files.
You can look at there for more info: https://v2.vuejs.org/v2/guide/syntax.html
<template>
<div class="infotechno-hero infotechno-bg">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-text wow move-up">
<h6>IT Design Consulting</h6>
<h1 class="font-weight--reguler mb-15">
Facilitate All
<br />Local IT-related Service Providers
</h1>
<p>Highly Tailored IT Design, Management Support Services.</p>
<div class="hero-button mt-30">
Get details
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-inner-images">
<div class="infotechno-inner-one">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-01.png" alt />
</div>
<div class="infotechno-inner-two wow move-up">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-02.png" alt />
</div>
</div>
</div>
</div>
</div>
</div>
</template>

Resize column width in bootstrap

I want to resize column width in bootstrap.
Curently, I have 3 <div> with col-md-4. But when one of the <div> hides then I want to change another 2 <div>'s into col-md-6.
Is this possible in bootstrap?
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-4">
</div>
<div id="txthide">
<div class="col-md-4">
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>

Web page layout with bootstrap-4.1.2

My goal is to get like this.
I use bootstrap-grid.min.css from bootstrap-4.1.2
What do I do wrong? My code
<div class="wrapper d-flex flex-column" style="min-height: 100vh;">
<section class="main d-flex flex-grow-1">
<div class="container-fluid d-flex align-items-stretch">
<div class="row">
<div class="col-md-3">
<div class="menu">
Aside
</div>
</div>
<div class="col-md-9">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>

You need to make changes in your structure. I have made some changes for you, please see if it serves the purpose.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="footer">
Header
</header>
<div class="wrapper d-flex flex-column" style="min-height: calc(100vh - 24px);">
<section class="main d-flex flex-grow-1">
<div class="container-fluid">
<div class="row" style="height:100%;">
<div class="col col-md-3" style="background-color:blue;">
<div class="menu">
Aside
</div>
</div>
<div class="col col-md-9" style="background-color:pink;">
<div class="text">
Main
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
Footer
</footer>
</div>

dynamically align images to maximum 3 on desktop and 2 on mobile

I have an upload component that previews selected images before the user can upload them to the server.
I want to display a maximum of 3 on the desktop and a maximum of 2 on the tablet and 1 on the mobile.
I don't know how many images the user will upload so it is a dynamic amount.
An example of an upload would generate something like this for 4 files.
<div>
<div>
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
<div>
<div class="thumbnail">
<div class="caption">
<h3><span>obomber.jpg</span></h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/498e5d16-114e-41b5-8d4d-4e798c36861c" class="img-thumbnail">
</div>
</div>
<div>
<div class="thumbnail>
<div class="caption">
<h3><span>podcasts.png</span></h3>
<p>Delete</p>
</div>
<img src="blob:http%3A//localhost%3A3030/08a89a31-6822-4436-a8be-e89ddfee9f0f" class="img-thumbnail">
</div>
</div>
<div>
<div class="thumbnail">
<div class="caption">
<h3><span>tangents.png</span></h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/ae1c844f-f0d2-4a50-a0b1-c46b4c00a4ba" class="img-thumbnail">
</div>
</div>
</div>

So as some said in a comment use the bootstrap grid system, very useful and this can all be achieved by doing using this
http://getbootstrap.com/css/#grid
Here is something that you might be able to use sorry on my phone at the moment might be rough:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>
<span>fixed_bug.png</span>
</h3>
<p>
Delete
</p>
</div>
<img src="blob:http%3A//localhost%3A3030/62733983-bb74-494c-bd4e-7a66ccfcb463" class="img-thumbnail">
</div>
</div>
</div>
</div>