Adjust the Bootstrap 4 HTML code to eliminate the rounded edges on the parallax jumbotron

I am currently working on a captivating parallax effect for my homepage, but I'm looking to eliminate the rounded corners from the images.

Below is the HTML code for one section:

<div class="jumbotron paral paralsec1">
            <h1 class="display-3">Connect</h1>
            <p class="lead">with musicians in your area.</p>
            <p class="lead"><a class="btn btn-info btn-lg btn-md" href="/public/register_member/" role="button">REGISTER AS MEMBER</a></p>
        </div>

And here is the CSS:

.paral {
min-height: 800px;
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
}

If anyone knows how to remove the rounded corners with minimal changes to the existing code, please share your solution. Thank you!

cssbootstrap-4

Answer №1

To eliminate the border-radius, you can utilize the rounded-0 class. For more information, please refer to the documentation

In this scenario, your code would look something like this:

<div class="jumbotron paral paralsec1 rounded-0">
  <h1 class="display-3">Connect</h1>
  <p class="lead">with musicians in your area.</p>
  <p class="lead"><a class="btn btn-info btn-lg btn-md" href="/public/register_member/" role="button">REGISTER AS MEMBER</a></p>
</div>

Answer №2

To eliminate the border radius, include the rounded-0 attribute.

Answer №3

Solved the issue by making changes to the border radius. Here is what I did:

<pre>.paral {
min-height: 800px;
background-attachment: fixed;
background-size: cover;
background-position: 50% 50%;
border-radius: 0px;
}
</pre>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to display distinct text boxes based on selected radio button?

Currently, I am working with JSP and have implemented an HTML form that includes a "Process" button at the top. When this button is clicked, it displays a form with two radio buttons - TestClient and TestServer. The form also contains a Submit button. If ...

javascriptjqueryhtmlcssforms

Refreshed the page following a setAttribute function call in Javascript

I have successfully implemented a function to switch between light and dark mode on my webpage using VueJS. However, I am facing an issue with the code: <a @click="toggleTheme" class="switch-mode" href> <div class=&q ...

javascripthtmlcssvue.jsdom

Child div height (with embedded iframe) - issue with responsiveness

I have been working on a simple code for a day now, trying to solve a problem with no progress :( My goal is to display an iframe with a background image. However, the snippet code I have is not showing the background image as intended. You can view the li ...

cssiframeresponsive-design

Trouble with SCSS Nesting

Can anyone help me with styling an H3 and a p tag within a div? I'm facing an issue where the p tag is not being styled in this code block: .marketing-single-page-titles{ h3 { margin: 0; padding: 0; p { margin: 0; padding: 0; position: rel ...

htmlcsssass

I am attempting to extract data from the website by utilizing the correct CSS selectors, however, I continue to receive results suggesting that the element is not present

Struggling to create a bot for my own services, but encountering crashes when trying to run it. login_button = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.CSS_SELECTOR, "//div[@class='loginRegisterButtons sb- ...

pythonhtmlcssseleniumwebdriver

Is it possible to extend the height of a floating child to match that of the parent element

Can CSS alone make this possible? The answer seems to elude me no matter where I look! I'm trying to create a left and right nav bar that extends to 100% height, essentially reaching the end of the page. There are three floated columns inside a float ...

htmlcss

Floating text around an image inside a div with floated IE7

Struggling with positioning text around an image in IE7, it's not floating correctly as expected. The text appears below the image instead of beside it. After researching, I discovered that the issue might be related to placing both the image and tex ...

csscss-floatinternet-explorer-7

The Bootstrap navigation bar was being disrupted by the page content, but it has

I've utilized the navigation bar example available at this link: The issue I'm encountering is that as I scroll down the page, the fixed navigation bar gets overridden by the content below it. This is the structure of the navigation bar: <! ...

bootstrap-4navigation

When using Phonegap in conjunction with AngularJS ng-view, the full-screen mode cannot be

I have seen similar questions asked before, but none of the solutions I found have worked for me so far. Here are some key parts of my index.html file: <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, ...

javascripthtmlcssangularjscordova

Exploring the true column widths in Bootstrap 4 tables

I have been attempting to create a layout similar to this in Bootstrap 4, where the table columns are set in pixels with fixed values, causing a horizontal scroll within the card. However, I am facing issues as the columns do not have the desired sizes. Th ...

htmlbootstrap-4css-tables

What is the best way to connect a CSS file with multiple pages located within a specific folder in HTML/CSS?

In my CS 205 class project, I am tasked with creating a website. To accomplish this, I used Notepad++ for the HTML files and Notepad for the CSS files. The site consists of an index.html page along with other content pages, each designed separately in Note ...

csshtml

Adaptive icon menu with submenus

I'm looking to create an icon menu with a submenu that expands upon click using HTML and CSS. Here's the design I have in mind I want the submenu to appear on the next row of the responsive div, as shown in the image above. However, the issue I& ...

htmlcssbootstrap-4

Basic HTML and JavaScript shell game concept

After spending several days working on this project, I am struggling to understand why the winning or losing message is not being displayed. The project involves a simple shell game created using HTML, JavaScript, and CSS. I have tried reworking the JavaSc ...

javascripthtmlcssshell

Generating PDFs from websites using code

Currently, I have my resume available online as an HTML page at www.mysite.com/resume.html. Whenever I need a PDF version of it, I rely on Google Chrome's print dialog to save it as a PDF using my print CSS stylesheet. However, I am looking for a way ...

cssgoogle-chromepdfprintingresume

Responsive grid made with HTML and CSS to create dynamic DIVs

Currently, I am working on a project that requires a responsive page layout using divs. The layout should resemble a grid, with 3 columns that reorganize into 2 columns on smaller screens. Here is the basic HTML structure I have so far: <div id="main" ...

htmlcsswidth

Adding a background image to a box in MUI is a simple task that can enhance

I've been attempting to include a background image in the Box component of mui, but I can't seem to get it to work. Here is the code I've been using: const Main = () => { return ( <Box sx={{backgroundImage:'images/cove ...

javascriptcssreactjsmaterial-ui

Is there a tool available for monitoring server status with HTML/CSS

I am interested in a way to create an HTML or CSS code that can ping an address or IP every 10 minutes to determine if it is sending back a signal. If a signal is received, I want the status on my website to display as 'online'. In case there is ...

htmlcss

Styling Easy-Autocomplete with jQuery

I am currently working on integrating autocomplete functionality using the jquery easy-autocomplete plugin npm install --save easy-autocomplete I am facing two issues related to its styling. The results are being displayed in a bulleted list format. I ...

jquerycssbootstrap-4laravel-8easyautocomplete

What is the best way to set the width of a fixed div based on its parent div's percentage width?

Having trouble setting a fixed div to be the same width as its parent element, which is itself size relative to another div. To clarify, here is a code snippet that demonstrates the issue: HTML <div class="grandparent"> <div class="parent" ...

htmlcsswidthfixed

Tips for creating a scrollable modal with a form embedded within

Is there a way to enable scrolling in a modal that contains a form? <div class="modal fade" id="assignModal" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel&q ...

htmlbootstrap-4